export interface HomeUIProps {
title: string;
onLaunch: () => void;
navigation: ReactNode;
}
export function HomeUI(props: HomeUIProps) {
return (
<main>
<nav>{props.navigation}</nav>
<h1>{props.title}</h1>
<button onClick={props.onLaunch}>Launch</button>
</main>
);
}CLI-first React application system
Start in the terminal. Add Studio when you want it.
Create a complete Srijika project from npm, work entirely in VS Code, and connect Codex or any MCP client to the same strict architecture. Desktop Studio is an optional visual workbench—not a requirement.
$
npm create srijika@latest my-appnpm createReact 19VS CodeCodex + MCPStudio optional
main
├─ nav
├─ h1
└─ button
├─ nav
├─ h1
└─ button
Choose your surface
One project. Three ways to work.
The CLI, VS Code, MCP clients, and Desktop Studio all consume the same project files, validation rules, and Feature → Slot → Part ownership model. You can change surfaces without migrating the project.
No desktop software required.
Create, validate, scaffold, install, run, and build from an ordinary terminal.
npm create srijika@latest my-app
cd my-app
npx @srijika/cli check
npx @srijika/cli devArchitecture-aware work in your editor.
Generated projects include VS Code tasks, .mcp.json,.vscode/mcp.json, and AGENTS.md automatically.
npx @srijika/cli add feature Dashboard \
--hook --store --logic --api --typesAdd the visual workbench later.
Open the same validated folder in Desktop Studio for source-derived inspection and a managed live Vite preview. Your TSX remains authoritative.
cd my-app
npx @srijika/cli studioThe operating contract
Visual tooling with engineering discipline.
Srijika is designed around a small set of hard guarantees. They keep visual work, developer edits, generated projects, and future AI operations understandable and safe.
One source of truth
Restricted, typed .ui.tsx remains authoritative. The hierarchy, Inspector, diagnostics, and preview are projections—not competing documents.
Bounded visual edits
Studio operations must resolve to reviewable AST source edits, pass hash checks, compile again, and satisfy the same validation path as developer-authored code.
Pure UI, explicit wiring
Visual contracts stay reusable and deterministic. Hooks, stores, resources, and event behavior live in connectors with visible ownership.
Last-good confidence
Invalid source updates diagnostics immediately while preserving a clearly marked last-valid preview. Broken work never becomes invisible state.
Local project authority
Projects are ordinary pinned React workspaces. Studio respects filesystem boundaries, developer formatting, lockfiles, and external editor changes.
One rule set everywhere
Studio, the VS Code extension, generated builds, and future AI workflows consume the same compiler and architecture contract.
System architecture
One direction from intent to truth.
Srijika parses source without executing arbitrary project code. Valid source produces one derived model; every supported editor action becomes a bounded source edit and compiles through the same path again.
Read the architecture guide →Authoritative source
Typed TSX describes structure, contracts, conditions, attributes, and composition.
Restricted compiler
A non-executing parser emits diagnostics, stable source spans, quick fixes, and a validated UiDocument.
Derived workbench
Project Explorer, UI Nodes, Inspector, problems, and real React preview stay synchronized to source.
Native boundary
Tauri and Rust enforce contained paths, bounded reads, hash-checked atomic saves, and managed app processes.
Project anatomy
Ownership you can see in the filesystem.
Features own named slots; slots own private parts. Capabilities flow down to descendants, never sideways into siblings or upward from private children.
src/
├─ features/
│ └─ home/
│ ├─ Home.ui.tsx
│ ├─ Home.connector.tsx
│ ├─ useHome.ts
│ ├─ home.store.ts
│ ├─ home.logic.ts
│ ├─ home.api.ts
│ ├─ home.types.ts
│ └─ slots/
│ └─ navigation/
│ ├─ Navigation.ui.tsx
│ ├─ Navigation.connector.tsx
│ └─ parts/
│ └─ navigation-item/
│ └─ NavigationItem.ui.tsx
└─ shared/UIPure visual contracts
Typed props, callback events, JSX, and ReactNode slots—without hooks or business logic.
Progressive chainConnector → Hook → Store → Logic → API
Each connector calls the highest available layer. Present layers cannot be skipped.
OwnershipPromote instead of reaching sideways
Shared sibling behavior moves to the nearest common owner; cross-feature work is deliberate.
Public alpha status
Clear about what exists—and what comes next.
The current milestone is a code-first UI foundation. Rust is already part of the secure desktop boundary; generated Rust business backends remain a future product phase.
Public CLI and npm launcher
Create a complete pinned Srijika project with npm create srijika@latest, then validate, run, and extend it from any terminal.
Software-independent MCP
Every generated project includes MCP and Codex metadata, so architecture-aware inspection and scaffolding work without Desktop Studio.
Code-first React foundation
Deterministic React 19 scaffolding, restricted TSX compilation, source diagnostics, last-good previews, and real project indexing are implemented.
Desktop project workflow
Create and open projects, navigate exact sources in VS Code, synchronize dependencies, and run or build the managed Vite application.
Shared language intelligence
Srijika Studio and the VS Code extension use the same compiler diagnostics and machine-readable corrections.
Rust application backend
Typed API documents, Rust routes, actions, validation, workflows, and single-binary generation belong to Phase 2 and are not shipped today.
Product evolution
A staged path to complete applications.
Each phase strengthens the same source-first model instead of replacing it. Backend, intelligence, and collaboration arrive through versioned contracts and reviewable edits.
Code-first UI foundation
Restricted TSX, project workflow, derived inspection, managed React runtime, and shared diagnostics.
Platform hardening
Lossless visual edits, tokens and variants, custom components, signed releases, and migrations.
Rust APIs and business logic
Typed requests, routes, actions, validation, workflows, and a unified deployable server.
AI and extensibility
Compiler-aware source transactions, capability permissions, plugins, and collaboration transport.
Start from npm
Your first Srijika project is one command away.
Use the complete CLI-first workflow without Desktop Studio, or add VS Code, MCP, and the visual workbench whenever they help. The project format stays the same.
npm create srijika@latest my-app