Built-in components

Trilium comes with its own set of Preact components, some of which are also available to Custom Widgets and Render Note.

To use these components, simply import them from trilium:preact:

import { ActionButton, Button, LinkButton } from "trilium:preact";

and then use them:

export default function MyRenderNote() {
    const onClick = () => showMessage("A button was pressed");
    
    return (
        <>
            <h2>Buttons</h2>
            <div style={{ display: "flex", gap: "1em", alignItems: "center" }}>
                <ActionButton icon="bx bx-rocket" text="Action button" onClick={onClick} />
                <Button icon="bx bx-rocket" text="Simple button" onClick={onClick} />
                <LinkButton text="Link button" onClick={onClick} />                
            </div>
        </>
    )
}

Widget showcase#

This is a Render Note example with JSX that shows most of the built-in components that are accessible to custom widgets and JSX render notes.

To use it, simply:

1. Create a render note.
2. Create a child code note of JSX type with the content of this file: Widget showcase
3. Set the ~renderNote relation of the parent note to the child note.
4. Refresh the render note to see the results.