Playground

Render Target

The playground renders whichever thing was created last: a standalone component or a PrefabApp. Create a PrefabApp after your components and it becomes the output, bringing its theme and mode along. For explicit control, define main() and return whatever you want rendered:

from prefab_ui.app import PrefabApp
from prefab_ui.themes import Presentation
from prefab_ui.components import Column, Heading

def main():
    with Column() as view:
        Heading("Dashboard")
    return PrefabApp(view=view, theme=Presentation(accent="cyan"))

main() always takes priority when your code creates multiple components or apps.

Themes

Themes from PrefabApp apply in the playground the same as in production. The toolbar’s theme picker overrides the code-defined theme when active; selecting “Code” restores it. Presets that specify a light or dark mode apply that mode when selected. While a picker theme is active, the light/dark toggle overrides its mode and keeps your choice through code edits. Selecting another theme releases the manual override; choosing “Code” returns control to your app. Shared playground links preserve the picker CSS and any forced or manually selected mode. Opening the link restores that mode even if the preset’s CSS has changed since the link was created. Theme styles belong to the preview, including popovers, dialogs, and tooltips opened from it. The editor and toolbar keep their own appearance. Changing the theme preserves your current form values and other interactive state. Use the same css_class values as in your app: arbitrary Tailwind classes and classes that change with state work in the preview too. See the themes docs for Basic, Minimal, Presentation, and custom themes.

Get Started

Concepts

Apps

Running Prefab

Examples

Reference

Render Target

Themes

​Render Target

​Themes

Render Target

Themes