trygg

Type-safe UI, from the ground up.

An Effect-native UI framework with JSX, fine-grained reactivity, and dependency injection built in — not bolted on. trygg is Norwegian for "safe" / "secure."

Caution

Pre-release software. Breaking changes are expected and welcomed when they improve the design.

Using trygg? See packages/core/README.md for installation, API reference, and usage guide.

// Components are Effects. Services are yielded. Layers are provided.
const Greeting = Component.gen(function* () {
  const theme = yield* Theme
  const name = yield* Signal.make("world")
  return <h1 style={{ color: theme.primary }}>Hello, {name}!</h1>
}).provide(themeLayer)

Features

• Effect-Native — Components are Effects, side effects are explicit and type-tracked
• Fine-Grained Reactivity — Signals built on SubscriptionRef; DOM nodes update surgically, no VDOM diffing
• Type-Safe — Full TypeScript support, errors tracked at type level
• Dependency Injection — Services yielded in children, layers provided by parents; R = never at mount boundary
• Testable — Swap services with mock layers, predictable component behavior
• No React Dependency — Custom JSX runtime

Packages

Package	Description	npm
trygg	Core framework — components, signals, renderer, router
create-trygg	Project scaffolding CLI (bunx create-trygg my-app)

Development

Prerequisites: Bun >= 1.x

git clone https://github.com/EduSantosBrito/trygg.git
cd trygg
bun install
bun run check          # lint + format + typecheck + effect:check

Command	Purpose
bun run check	All checks (lint, format, typecheck, effect:check)
bun run typecheck	Type-check the workspace
bun run test	Run tests
bun run build	Build packages/core
bun run examples	Dev server at localhost:5173
bun run lint	Lint with oxlint

Contributing

See CONTRIBUTING.md for development setup, PR process, and code standards.

License

MIT