Skip to content
Docs
    Menu

    The editor

    Dark Magic

    What the Dark Magic switch does to elements, sections and components you add, and what changes when you turn it off.

    The elements and ready-made sections in the Elements panel are plain building blocks with neutral styling. Dropped onto a finished page, they usually look out of place.

    Dark Magic fixes that. When it's on, the AI restyles each thing you insert so it matches your brand and the section around it: your colors, your fonts, and the look of nearby content. A hero stays a hero; it just looks like it belongs on your site.

    The switch is at the top of the Elements panel, labeled Dark Magic with a sparkle icon. It's on by default, and the editor remembers your choice in this browser.

    What you see

    • The element or section appears straight away with its plain styling.
    • An outline with Applying dark magic… sits over it while the AI works.
    • When the AI is done, the restyled version replaces it.

    Each restyle is a normal change. If you don't like the result, press Cmd/Ctrl+Z. If a component insertion is still running, press Esc to cancel it; the inserted component is removed.

    Components

    For components, Dark Magic does more than restyle:

    • Inserting a component: the AI fills in the component's options so it fits the spot (you'll see Dark Magic configured {name} when it's done).
    • Replacing or swapping your selection with a component: the AI carries your existing text, links and behavior into the new component. The original stays visible until the replacement is ready.

    If it fails, the panel says Original selection kept (or Raw {name} kept for an insertion) with Retry Dark Magic and Dismiss buttons.

    Credits

    Dark Magic uses the AI, so it uses a small number of credits each time it runs. See Credits for AI.

    When Dark Magic is off

    • Elements and sections keep their plain styling. Style them yourself in the Style panel, or ask the AI.
    • Components are inserted with their default options. If a component has options, a Configure {name} card shows them all so you can fill them in.
    • Replacing a selection with a component is a plain swap. You're warned first: Raw replacement removes the selected element's content, links, behavior, and styling. Nothing is copied into {name}.

    Related