The universal UI compiler
Write once. Ship to every framework.
Terecode is a declarative language for UI components. One source compiles to idiomatic, readable code for React, Vue, Svelte, and seven more targets - real source you own, not a runtime to ship.
component Counter {
state { count: number = 0 }
template {
<button on:click={ state.count += 1 }>
Clicked {count} times
</button>
}
}// compiles to React, Vue, Svelte, Solid, Angular, RN, WC, Astro, Flutter, Kotlin
The same UI, everywhere - without the copy-paste.
Teams shipping to web and mobile maintain the same components many times over. Terecode collapses that into a single, declarative source.
One source of truth
Stop rebuilding the same button, form, and card in every framework. Author components, design tokens, skins, and themes once.
Real, readable output
Terecode emits idiomatic source for each target - hooks and clsx for React, runes for Svelte, signals for Solid. Code you can read, diff, and own.
Not a runtime
There's nothing to ship to your users. The output is plain framework code with zero Terecode dependency at runtime.
One language. Every framework you actually use.
Each emitter generates code that looks like a senior engineer wrote it by hand for that platform - following its conventions, not a lowest common denominator.
The same component, idiomatic on every side.
One Counter.trc, two outputs. React gets hooks; Svelte 5 gets runes and native events. Nothing generic - each reads like hand-written code.
import { useState } from "react";
export function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
);
}<script lang="ts">
let count = $state(0);
</script>
<button onclick={() => count += 1>
Clicked {count} times
</button>terecode build Counter.trc -t react,sveltedone
Everything around the language, included.
Terecode isn't just a compiler - it's the full workflow: authoring, styling, tooling, and design integration.
10 emitters
React, Vue, Svelte, Solid, Angular, React Native, Web Components, Astro, Flutter, and Kotlin Compose - all from one IR.
Tokens, skins & themes
Design tokens, component skins, and themes are first-class. Style once and resolve to CSS variables, StyleSheet, or platform styles.
Decompiler
Already have React or Vue components? Bring them back into Terecode - round-trips to .trc with structure preserved.
Language server
Completion, hover, go-to-definition, and diagnostics for .trc files, with context-aware suggestions inside every block.
Prettier & Storybook
An idempotent formatter for every file type, plus a Storybook addon that generates stories and controls from your components.
Figma sync
Keep design and code in step - sync tokens and components between Terecode and your Figma libraries.
Install the CLI and compile your first component.
Add Terecode to any project. Point it at a .trc file and pick your targets.