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 and NoCSS styling source are TypeScript. Brahma turns them into static pages, page-local JavaScript, and the generated stylesheet.
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/core";
import { signal, tmpl } from "@cyftec/maya/signals";
import { css } from "./assets/styles.js";
const count = signal(0);
export default m.Button({
class: css("pointer ph3 pv2 br2"),
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 uses independent static documents, generated NoCSS, and page-local JavaScript with 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. NoCSS validates application classes, while runtime sanitizers reject dangerous href schemes.
m.Input({
type: "email",
required: true,
});
m.Button({ type: "submit" });
m.Link({ rel: "stylesheet" });
// runtime URL sanitization
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 and NoCSS generation controlled by typed configuration.
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, NoCSS source, serve behavior, dependencies, TypeScript, Git ignores, and editor settings live in one project-level TypeScript file.
export const karma = {
brahma: {
build: {
publishDir: "docs",
buildableStylesheetFileName: "styles.ts",
assetsDirName: "assets",
},
serve: { port: 3000 },
},
maya: {
appType: "web",
dependencies: { "@cyftec/maya": "0.2.1" },
devDependencies: { typescript: "7.0.2" },
},
};Brahma emits static HTML, generated NoCSS, and page-local JavaScript before deployment. The reactive interface is ready for static hosting without an application server.
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