MPA-first · TypeScript-native · DOM-direct
Maya turns TypeScript pages into static HTML, then brings them alive with signals that update the exact DOM nodes you intended—no virtual DOM, hydration, or app server in the way.
Try the live Signal demo↓No virtual tree between your code and the interface.
A smaller conceptual stack for
Maya’s templating syntax is TypeScript that reads like HTML. There is no JSX dialect or SCSS layer to learn before you can make a useful interface.
ONE LANGUAGE
Markup, behavior, and composition stay together in TypeScript. Native element factories keep the shape familiar while the compiler keeps it honest.
Explore Maya syntax →
import { m } from "@cyftec/maya";
import { signal, tmpl } from "@cyftec/maya/signal";
const count = signal(0);
export default m.Button({
onclick: () => count.value++,
children: tmpl`Count: ${count}`,
});Maya is MPA-first. Brahma writes static pages, Maya mounts the real DOM, and signals keep the parts that need to move precisely reactive.
MULTI-PAGE BY DEFAULT
A Maya app resembles the durable HTML–CSS–JS web: independent static documents with page-local JavaScript and no client router required.
dev/page.ts→/index.htmldev/docs/page.ts→/docs/index.htmldev/about.page.ts→/about.htmlCOMPONENTS + DOM
Component-driven architecture does not put the browser behind a framework escape hatch. Element getters resolve to actual DOM nodes.
const panel = m.Article({
children: "Native DOM node",
});
m.Button({
onclick: () =>
panel().toggleAttribute("data-open"),
children: "Toggle panel",
});CONTROL COMPONENTS
Built-in control components replace noisy conditional markup. Use them for clarity—or use ordinary TypeScript whenever it fits better.
Readable control flow is part of the element tree.
Signals are small reactive data units that notify the computations that read them. Maya uses those effects to surgically update a text node, child position, or attribute—not re-render an entire component tree.
TRY IT NOW
Make the DOM move.Tap the bright button and watch the highlighted values update instantly.<main> <aside>untouched</aside> <output>24</output></main>Maya keeps its low-level promises visible: browser attributes remain typed, keyed nodes keep their identity, and removed subtrees release their reactive work.
TYPED BROWSER CONTRACTS
Tag-specific attribute grammars guide valid values in TypeScript. Runtime sanitizers also reject dangerous href schemes and unsafe inline style expressions.
m.Input({
type: "email",
required: true,
});
m.Button({ type: "submit" });
m.Link({ rel: "stylesheet" });
// runtime URL/style sanitizers
m.A({ href: trustedUrl });KEYED BY IDENTITY
Give m.For an itemKey and Maya preserves matching element getters through shuffles and updates, while per-item signals carry the changed data.
#a · Alpha#b · Beta#c · Gamma#c · Gamma#a · Alpha#b · Betasame nodes · new positions
LIFECYCLE-AWARE
When onunmount is used, Maya observes removed subtrees, calls lifecycle listeners from the deepest child upward, and disposes the signal effects attached to those elements.
<section> <card> <button /> </card></section>MutationObserver walks removed subtrees deepest-first.
Create, continuously develop, build, and publish Maya apps from one dedicated CLI—with project behavior gathered into one typed configuration file.
BRAHMA CLI
Spawn a project, install its declared dependencies, run a watched staging server, and emit minified production files.
Open Brahma docs →$ brahma create hello-maya
✓ web scaffold created
$ cd hello-maya && brahma install
✓ dependencies synchronized from karma.ts
$ brahma stage
→ watching dev/ at localhost:3000
$ brahma publish
✓ static production build readyWEB · PWA · EXT
Brahma creates web, PWA, or Chrome extension scaffolds. Manifests stay in TypeScript, so platform fields come with autocomplete and type checking.
KARMA.TS
Build paths, serve behavior, dependencies, Git ignores, and editor settings live together in one project-level TypeScript file.
export const karma = {
brahma: {
build: { publishDir: "docs" },
serve: { port: 3000 },
},
maya: {
appType: "web",
dependencies: { "@cyftec/maya": "latest" },
},
};Brahma emits static HTML, CSS, and page-local JavaScript before deployment. Your fully reactive interface can live on a CDN, object storage, or GitHub Pages—without a cloud compute machine running it.
See the production workflow →$0 app server required
2.04× React throughput
In the Maya Benchmark’s 10,000-row keyed mutation test, Maya’s exact-node updates deliver 188,000 DOM operations per second.
Open the full benchmarkMaya Benchmark v1 · Chromium 140 · Apple M3 Pro · median of 50 runs. Exact result set used by the linked benchmark site.START CLOSE TO THE PLATFORM