Nucleify Docs
EN PL

Core Concepts

Playground

The Nucleify Playground is a browser sandbox for optional portable components - not the product-migration path. Yes - migrate any existing Next, Nuxt, Vue, React, or other supported app as-is with product convert (nuc emit convert). No *.nuc.tsx rewrite. No shared_modules refactor first.

Here you edit portable source on the left and watch live emit for modern frameworks on the right - no local install required.

Live surface: play.nucleify.io.

Why use it

Playground answers: does optional portable emit look like something I would ship?

It does not replace convert. Bring an existing Next / Nuxt / Vue / React app as-is and convert it - without rewriting into Nucleify authoring format and without a shared_modules split first.

  • Open play.nucleify.io
  • Edit portable TypeScript only if you want shared presentational UI (props, state, derived, handler, styles)
  • See idiomatic output for React, Vue, Svelte, Astro, Solid (and related Nuxt / Next hosts where shown)
  • For a real app migration: Migrate FAQ · CLI convert · Compiler

Compile requests from the playground hit the same cloud compile surface the CLI uses (compileApiUrl → https://cli.nucleify.io).

What you will see

Pane Purpose
Source Optional portable component authoring (#nuc-compiler/runtime)
Emit Framework-native preview / code for the selected target
Examples Starter components (for example a counter with state + derived values)

A minimal portable counter looks like:

import { component, derived, handler, state } from '#nuc-compiler/runtime'

export default component({
  name: 'Counter',
  props: { label: { type: 'string', optional: true, default: 'Count' } },
  setup(props) {
    const count = state(0)
    const double = derived(() => count.value * 2)
    const onInc = handler(() => count.set(count.value + 1))
    const onReset = handler(() => count.set(0))
    return () => (
      <div class="counter">
        <button type="button" onClick={onInc}>
          {props.label}: {count.value}
        </button>
        <span class="meta">×2 = {double.value}</span>
        <button type="button" onClick={onReset}>
          Reset
        </button>
      </div>
    )
  },
})

Use the playground to validate portable authoring rules before you wire optional emit into CI. To migrate a whole product, stay on convert - not this sandbox.

Next steps

  1. Migrate an existing app as-is: nuc emit convert web --target=next --path=/path/to/your-app --out=my-next --force · Migrate FAQ
  2. Optionally experiment with portable UI at play.nucleify.io
  3. Install the CLI from cli.nucleify.io
  4. Read Compiler for convert vs portable emit