Feature Request: Add an Interactive Playground

[3aluw]

Is your feature request related to a problem? Please describe.
It’s currently hard to quickly experiment with Formwerk features, test configurations, and share examples. the dev may often find himself setting up a new project just to try out simple use cases, which is time-consuming.

Describe the solution you'd like
A playground environment (hosted on the website,) where users can:

• Write and preview Formwerk code instantly.
• Try different form configurations without needing a local setup.
• Share reproducible examples with others when asking for support or filing issues.

Describe alternatives you've considered

• Using external sandboxes like CodeSandbox, but these don’t always reflect the latest Formwerk release and require extra setup.

Additional context
A built-in playground would greatly improve the developer experience, speed up learning, and make community support easier.

[KammererTob]

For what it's worth: On nearly all code examples with preview you can directly go to stackblitz by clicking the icon in the top-right corner. Form there you usually have a very good basis to test the specific feature and also fork it to make/share your adjustments.

[3aluw]

Thanks for pointing that out! StackBlitz is definitely helpful, but what I’m suggesting is more of a built-in playground on the Formwerk site itself.

This is a well-known pattern in the ecosystems (e.g. VueUse, Vuetify, FormKit...), because it:

• Lets users experiment instantly (no container boot time, no setup).
• Ensures consistency when reporting issues (everyone reproduces in the same environment).
• Makes switching versions easier (switching versions is just a click).

StackBlitz works well for exploring, but an official playground would make experimenting, learning, and support much smoother.

[logaretm]

I agree that it would help people play and test Formwerk more. Compared to UI libraries, Formwerk is headless so a playground is a little more involved.

A good starting point is our "starter kits" project. Once we finish that we could use them for the online playground. I don't have time to work on that at the moment, but the plan is to create a tailwindcss implementation of all components, similar to what we have in the internal playground but have them being "production ready" or copy/pastable into production code.

If someone would like to take this on this will be great, happy to guide and support in anyway!

[3aluw]

A good starting point is our "starter kits" project. Once we finish that we could use them for the online playground. I don't have time to work on that at the moment, but the plan is to create a tailwindcss implementation of all components, similar to what we have in the internal playground but have them being "production ready" or copy/pastable into production code.

Thanks for the clarification! One thing I’d love to better understand: since the plan is to build a TailwindCSS implementation of the components “similar to what we have in the internal playground,” will the starter kits essentially be a direct reimplementation of those existing playground components, or do you see them evolving into something broader/different?

Just trying to gauge whether the goal is a 1:1 copy (but production-ready), or if there’s room to extend/modify beyond what’s already in the playground package.

[logaretm]

if there’s room to extend/modify beyond what’s already in the playground package.

More Polished UI, Maybe stories with storybook, some docs, So it's a bit involved but we can get there step by step.