↔

cross-framework

Multi-stack compiler · React → Vue live

Developer playground · local API · no account

Paste JSX & TSX — move UI across stacksReact→Vue without a full rewrite

Today the playground converts React (JSX / TSX) to Vue SFCs. The pipeline is built to grow toward Svelte, Solid, Qwik, and more source → target pairs — same AST mindset, more languages over time. Use it to explore migrations, teach teams, or bootstrap a port.

Open playground See roadmap Documentation

At a glance

1

Pipeline

Parse → model → Vue SFC in one pass

9

Examples

Includes :class / :style, cart, settings, wizard…

∞

Iterations

Edit in Monaco, convert as often as you need

0

Lock-in

Runs locally; copy or download output

Live converter

Drop in .jsx / .tsx or paste from your repo — run convert and read Vue on the right. More input languages are on the roadmap; editors use word wrap so long lines don’t force horizontal page scroll.

INPUT
OUTPUT
Ready to convert

Example gallery

Nine snippets in website/samples/ —five compact showcases (incl. class & style binding), plus four larger flows (cart, settings, onboarding, command palette).

What you get

Concrete behavior lives in src/parser/react.ts and src/codegen/vue.ts—see the Compiler features page in the documentation for the full inventory. Built for teams evaluating a Vue path: transparent pipeline, inspectable output, and room to grow as parsers and emitters improve.

Parser (react.ts)

Babel + JSX/TS; finds the component (default or named export, including memo, forwardRef, Object.assign). Walks the body for hooks and verbatim code; main template from the last JSX return.

  • useState / useRef / useMemo / useEffect → IR
  • Nested JSX arrows → subcomponent stubs (h/defineComponent)
  • JSX: spreads, events, ?: and &&, .map + key

Codegen (vue.ts)

Prints Vue SFC script setup and template: composition API imports emitted as needed, template with v-bind, v-if, v-for, className→class, boolean :attrs.

  • Effect deps: ref.value → watch sources
  • useRef .current → .value in templates
  • Simple handler names get stub functions when missing

Hooks & props

State and memos rewrite ref-like names to .value in script; props from destructuring become defineProps + toRefs.

  • computed() keeps real useMemo callback source
  • watch / watchEffect / onMounted from useEffect
  • Verbatim blocks preserved in order

Developer UX

Monaco editors, nine curated samples, copy/download, and local POST /api/convert—same convertCode as the CLI.

  • Word-wrapped editors
  • No external conversion SaaS in the demo
  • Documentation: cross-framework-doc.netlify.app (CLI, API, compiler inventory)

Recently shipped

Highlights from the current playground experience.

2025
  1. 1

    Nuxt 4 playground shell

    Sticky nav, landing sections, and SEO-friendly structure for docs-style reading.

  2. 2

    Framework roadmap in the UI

    Input/output selects list future frameworks as disabled options so expectations stay clear.

  3. 3

    Curated sample library

    website/samples/ has nine files, including class/style binding between greeting and invoice line.

Roadmap & todo

The core is React → Vue today. More sources and targets are planned; framework pickers in the UI already show what’s next (disabled until ready).

In progress

  • Broader JSX coverage (edge-case components, fragments, conditional trees).
  • Clearer diagnostics when a pattern can’t be mapped one-to-one.
  • Performance passes on large files and cold convert latency.

Planned

  • Additional source frameworks (Vue/Svelte/Solid/Qwik) as inputs.
  • More compile targets beyond Vue SFC.
  • Optional CLI + CI hooks for batch migrations.
  • Richer style and CSS-module handling across stacks.

How it works

Your React code is posted to a local Nuxt server route. The package parses JSX/TS with Babel, lowers hooks and JSX into an intermediate representation (state, memo, effect, template tree), then prints a Vue SFC string—no third-party conversion API.

01

Parse

JSX and component structure become an AST-backed model.

02

Normalize

Hooks, state, and effects are mapped to Vue-friendly patterns where possible.

03

Emit

A Vue SFC (template + script) is printed for copy or download.

Contact

Questions, bug reports, or feedback about the compiler or this playground: parsajiravand@gmail.com. Interested in joining the team? Email the same address with a short note about your background and what you’d like to work on.

More ways to connect (public issue tracker, chat, etc.) may be added later.

FAQ

Is output production-ready?
Treat it as a strong starting point. Always review, test, and adjust types, accessibility, and framework-specific APIs.
Where does conversion run?
In this demo, your code is sent to a local Nuxt server route that calls the cross-framework package—no external conversion SaaS.
Why are some frameworks grayed out?
They’re on the roadmap. Only React → Vue is wired today; disabled entries preview what’s coming.
How do I report bugs or ask about joining the team?
Email parsajiravand@gmail.com. Say if you’re reporting an issue, asking a question, or interested in contributing longer-term. More contact options may be added later.