Playground

Interactive Vue 3 form playground for NotForm. Edit forms, test schema validation and dynamic fields, and share reproducible examples in your browser.

Ready to try it right away? Open the interactive Playground.

The NotForm Playground is a browser-based Vue 3 REPL for building small forms, experimenting with NotForm, and sharing reproducible examples without creating a local project.

What's included

The default environment includes:

Vue 3 with the Vue REPL's Monaco editor and TypeScript support
NotForm core and Zod through the built-in import map
The NotForm, NotField, NotArrayField, NotMessage, and useNotForm APIs
Tailwind CSS and shadcn-vue color tokens for quick styling in the live preview
An editable import map for replacing browser-resolved dependencies
Shareable state encoded in the URL, with the last local session restored when no shared state is present

The playground starts from a working form example with field validation, submission state, and a dynamic array field.

Reproduce an issue

Use the playground when an issue can be reduced to a small Vue example:

Open the Playground.
Reduce the example until only the behavior needed to demonstrate the issue remains.
Click Share to copy the current playground URL.
Include that URL in the issue or pull request.

Because the editor state is part of the URL, the shared link opens the same files and configuration instead of relying on a separate repository or local setup.

A playground link should be a minimal reproduction. Keep secrets, private API keys, and production data out of examples you share.

Test a pull request

NotForm publishes preview packages for pull requests through pkg.pr.new. That makes it possible to test a change in the browser before it is merged.

After the preview job finishes, copy the pkg.pr.new package URL from the pull request comment. For example:

https://pkg.pr.new/notform@[pr-number]

The browser playground resolves packages through esm.sh, which supports pkg.pr.new packages through its /pr/ URL form. Replace the playground's notform import-map entry with:

https://esm.sh/pr/notform@[pr-number]?external=vue

Keep the playground's existing vue import-map entry unchanged. The external=vue query leaves Vue as a bare import so the preview package uses the same Vue runtime as the playground.

Then exercise the changed behavior, and share the resulting playground URL with the PR so the exact browser example can be reviewed.

The playground is a manual/browser verification tool. It does not replace the project's Vitest suite, typecheck, lint, build, or other CI checks.

What the playground does not provide

The REPL does not provide a full Node.js or Nuxt environment. Dependencies are resolved through the import map and browser-compatible CDNs, so server-only APIs, filesystem access, and package-manager workflows are outside its scope.

For repository-level changes, keep the source tests and local validation as the source of truth, and use the playground or the Vue 3 and Nuxt Module stackblitz templates when a visual or browser reproduction makes the behavior easier to verify.

Nuxt Module

Seamless integration with Nuxt 4, featuring auto-imports and zero configuration.

Working with AI

How to feed NotForm documentation to LLMs and AI coding assistants.