FastStrap Preview Studio

An interactive, local-first component explorer and code playground for FastStrap and FastHTML. Browse component examples, inspect their parameters, adjust previews, and copy Python snippets into your own projects.

The Studio runs on your computer; it is not a hosted app builder or a public code-execution service. Its core assets and browser runtimes are included locally. A few optional integrations (such as KaTeX, Mermaid, Chart.js, Plotly, and GSAP) load their renderer assets from CDNs and therefore need an internet connection when used.

Preview

Images use version-pinned GitHub URLs so they render in PyPI's project description as well as on GitHub.

Install And Run

Requires Python 3.10 or newer.

python -m pip install faststrap-preview-studio
faststrap-preview

Then open http://127.0.0.1:8080. The server binds to loopback by default, so it is available on your computer only.

To use another port or host, set PORT or HOST before starting the command. For example, in PowerShell:

$env:PORT = "8090"
faststrap-preview

What You Can Do

• Browse 86 curated component previews, organized by category, with import guidance and example code.
• Adjust supported component parameters and inspect the result in an isolated preview canvas.
• Compare mobile (375px), tablet (768px), laptop (1024px), and full-width desktop layouts.
• Switch canvas backgrounds and use the light/dark theme controls.
• Explore interactive HTMX demos for patterns such as search, loading actions, validation, and tables.
• Copy FastHTML/FastStrap snippets into an application.
• Embed curated component previews in documentation using the Studio's /embed/{component} route.
• Use the local sandbox to run complete examples on your own machine.

Local Playground And Safety

The sandbox is designed for a developer running the Studio locally and executing code they trust. In its default local mode, submitted Python can run with normal Python capabilities. Do not expose the sandbox to untrusted users or the public internet. This is a local learning tool, not an isolation boundary.

The default host is 127.0.0.1. Setting HOST=0.0.0.0 makes the server reachable from other machines on the network and should be done only when you understand that exposure.

For a hosted documentation integration that needs curated previews but not arbitrary code execution, set:

STUDIO_ENABLE_SANDBOX=false

This removes the /sandbox/* code-runner routes. Setting STUDIO_ENABLE_ARBITRARY_EXEC=false applies AST restrictions to sandbox execution, but it is not process or container isolation and should not be treated as safe public multi-user execution. Keep hosted deployments appropriately isolated and expose only the routes they need.

Optional integration examples may fetch renderer scripts or styles from third-party CDNs. The core Studio shell, Bootstrap/FastStrap styles, and FastHTML browser runtimes are served from the installed package.

Embedding A Preview

When the Studio is reachable from your documentation site, an iframe can display a component preview. Replace the example host with the Studio's actual base URL:

<iframe
  src="https://studio.example.com/embed/Button?variant=primary&text=Try+FastStrap"
  width="100%"
  height="280"
  title="FastStrap Button preview"
  data-faststrap-preview
></iframe>

The Studio's /studio/{component} page can generate embed markup using STUDIO_BASE_URL. The optional bridge script at /studio-static/js/embed.js synchronizes theme changes and adjusts iframe height. For a public documentation deployment, disable the arbitrary-code sandbox and review which routes and network access are exposed before hosting it.

Install From Source

git clone https://github.com/Faststrap-org/FastStrap_Studio.git
cd FastStrap_Studio
python -m venv .venv

Activate the environment, then install the project and development tools:

# Windows PowerShell
.venv\Scripts\Activate.ps1
python -m pip install -e ".[dev]"
python main.py

# macOS/Linux
source .venv/bin/activate
python -m pip install -e ".[dev]"
python main.py

Configuration

Development

Run the automated tests and linter from the repository root:

python -m pytest -q
ruff check faststrap_studio tests

The package is organized into the faststrap_studio Python package, component catalogue, route modules, local static assets, and a repository-level tests/ suite. Frontend runtimes vendored in faststrap_studio/static/vendor/ include their version and license notices in that directory.

Links

• FastStrap Preview Studio on PyPI
• Source repository
• Issue tracker
• FastStrap documentation
• Changelog
• License