How to create custom components

[jimkring]

There's an example in the demo of a custom (cowsay) component. Are there any docs on how to create custom components?

[sydney-runkle]

@jimkring,

Thanks for your question! We don't have that at the moment. Would certainly be a great addition to the docs. PRs welcome!

[jimkring]

Thanks @sydney-runkle. Could you share a short few-sentence overview of the process? I'd be happy to try to collect this into a PR.

[sydney-runkle]

@jimkring,

Sure thing. Btw, you can add the new docs to the docstring for Custom component. I just deployed the first version of docs for FastUI here: https://docs.pydantic.dev/fastui/api/python_components/?h=custom#fastui.components.Custom.

In the overview, I'd focus on:

• The visualization of the custom component comes from defining a typescript functional component (FC)
• Use JSX / React for rendering the result
• Pass data in via the Custom component's data field

Also, here's the typescript custom component, as a reference:

FastUI/src/npm-fastui-prebuilt/src/App.tsx

Line 59 in d00bc2f

const Cowsay: FC<{ text: string }> = ({ text }) => {

.

As a side note, I'm working on a docs build failure issue at the moment, that should be fixed by tomorrow.

Feel free to ping me if you have any other questions! I'll be going through a bunch of issues here soon, so will respond to your other ones shortly :).

[jimkring]

Thanks. I'd like to start by asking what might be the best way to convert this Iframe "factory" function into something that feels more like a proper fastui component (e.g. called RawHTML).

def iframe_from_html_raw(
        raw_html: str,
        width: Union[str, int, None] = None,
        height: Union[str, int, None] = None,
        ) -> Iframe:
    """Returns a fastui Iframe component that displays raw HTML content."""
    return Iframe(
        srcdoc=raw_html,
        # todo: ideally `fastui` should make src not required if srcdoc is provided
        src="http://required.input.ignored.when.srcdoc.is.valid",
        width=width,
        height=height,
    )

Does this even make sense? Can one even have "pure python" components? I'm aware the TypeScript interfaces are at heart of things, yet I'm not very experienced at TS and will generally try to work around any current limitation in fastui within Python. Also, it's possible for me to add python to my fastui python project, but I have no idea where I'd start adding the TS portion of a component? Can I register a new component's TS and Python parts dynamically, from within Python? For example, if I have a "my_component" folder in my project with both the TS and Python files.

Thanks for listening to all my naive questions.

[jimkring]

Also, with respect to docs, I think that filling out a guide here would be a great place to start: https://docs.pydantic.dev/fastui/guide/

[sydney-runkle]

Hey @jimkring,

Apologies for the delay. I was out of office last week. I anticipate having more time to improve FastUI after PyCon US this week! Thanks for all of your awesome questions and contributions!

[jimkring]

Hi @sydney-runkle. Have fun at pycon us and I hope it’s a productive trip for the pydantic team. Catch up with you in a bit…

[Nosikmov]

Hello, and how can I replace the App.tsx already loaded from the site with my own with a modified Custom, or is there an example to replace Custom with something else, I need to bring the Canvas to the page, but I can't find a way to do it.

[jimkring]

Hello, and how can I replace the App.tsx already loaded from the site with my own with a modified Custom, or is there an example to replace Custom with something else, I need to bring the Canvas to the page, but I can't find a way to do it.

See #307 and #309 for some information on how you might be able to run locally. I'm not sure if you're using Python or if you're just using the js/tsx components.

[Nosikmov]

Hello, and how can I replace the App.tsx already loaded from the site with my own with a modified Custom, or is there an example to replace Custom with something else, I need to bring the Canvas to the page, but I can't find a way to do it.

See #307 and #309 for some information on how you might be able to run locally. I'm not sure if you're using Python or if you're just using the js/tsx components.

I use python, but the tsx library is loaded from the server, in which case how do I get the canvas on the page?

[jimkring]

You would need to build and bundle the tsx/JS files and serve them yourself. It’s not straightforward right now.

[hasansezertasan]

You would need to build and bundle the tsx/JS files and serve them yourself. It’s not straightforward right now.

I think this is the only downside of FastUI 😞.