Nordcraft is a web development engine built for developers and creatives who want to build performant web applications with server-side rendering (SSR), visual editing, and AI-assisted logic generation. It’s designed for teams and individuals who need the speed of AI without sacrificing control over code and design. The engine is composed of modular packages including core, runtime, SSR, and std-lib, all written in TypeScript and designed for internal use in the Nordcraft application.
Technically, Nordcraft leverages a monorepo structure with Bun as the package manager and uses a component-based architecture with real-time data binding and workflow automation. It supports SSR for SEO and performance, integrates with APIs and GraphQL, and runs logic in web workers for the issue panel. The system is being open-sourced incrementally, with server-side rendering and standard libraries being the current focus for public contribution.
What You Get
- Core Package - Shared logic used across all Nordcraft packages, providing foundational utilities for components, state, and rendering.
- SSR Package - Server-side rendering engine that enables SEO-friendly, fast-loading web apps by rendering components on the server before sending to the client.
- Runtime Package - Frontend hydration and update logic that synchronizes the visual editor with live DOM changes and component state.
- Std-Lib Package - Built-in formulas and actions for data transformation, including temperature conversion and API response handling, used in workflows and SSR.
- Search Package - Issue tracking and project traversal system powered by web workers, enabling real-time code analysis and error detection in the editor.
- Visual Editor - Drag-and-drop interface for designing components, applying CSS animations, and connecting to APIs with live data previews.
Common Use Cases
- Building AI-assisted web components - A designer uses Nordcraft to visually create a weather widget that auto-converts Fahrenheit to Celsius using built-in formulas, then deploys it with SSR.
- Developing interactive data dashboards - A developer connects Nordcraft to the Pokémon API to visualize stats with live data, then adds custom animations and workflows without writing boilerplate code.
- Creating reusable UI components with logic - A frontend team builds a profile-card component with embedded workflows (playMusic, setDisplay) and shares it across projects using Nordcraft’s component system.
- Self-hosting a visual web builder - A startup migrates from Figma + manual coding to Nordcraft to offer clients a no-code interface that generates production-ready SSR web apps.
Under The Hood
Architecture
- Modular monorepo structure with clearly delineated packages (core, lib, ssr, runtime, search, backend, editor) enforcing strict separation of concerns and scoped dependencies
- Component-based UI architecture leveraging declarative rendering through ToddleComponent and ComponentContext, with explicit dependency injection via context providers
- Plugin system built on versioned abstractions (PluginActionBase, PluginActionV2, LegacyPluginAction) to support extensibility while preserving backward compatibility
- Hono-based server routing with environment-specific types and isolated route handlers that decouple API logic from UI rendering
- Custom element system with dynamic script loading and unified asset routing for consistent component and resource lifecycle management
Tech Stack
- TypeScript-first monorepo with Hono for lightweight server routing and Bun as the unified runtime and package manager
- Modular package isolation enforced by Bun’s isolated linker, with comprehensive type safety and workspace-aware compilation
- Tooling stack includes esbuild for bundling, ESLint with TypeScript plugins, and Prettier with organize-imports for consistent code style
- Testing infrastructure uses Happy DOM for browser-like environments and Bun:test for native unit testing with full type coverage
- No traditional database layer; data is handled via file-based or in-memory mechanisms with potential Cloudflare Workers integration
- Strict TypeScript configuration and experimental type system enhancements ensure robust type safety across the codebase
Code Quality
- Extensive test coverage spanning unit, integration, and domain-specific validation layers with comprehensive edge-case testing
- Clear separation of concerns with focused test files mirroring production logic in backend, formulas, and search modules
- Proactive validation and structured error reporting detect misconfigurations before runtime, with rich metadata for debugging
- Consistent naming, type-safe handler patterns, and defensive null/undefined guards ensure predictable behavior
- Robust linting and static analysis enforce architectural constraints like avoiding duplicate formula arguments or legacy themes
- High type safety achieved through well-defined interfaces and test-driven validation of type boundaries
What Makes It Unique
- Dynamic template interpolation in HTTP proxy requests enables context-aware API calls with server-side variable substitution
- On-demand CSS generation from component trees delivers true component-scoped theming without static files
- Formula-driven text rendering with reactive data binding eliminates the need for templating engines or virtual DOM
- Header-aware proxy routing with automatic cookie injection and sanitization acts as a secure, embedded API gateway
- Dual text node strategies optimize for both editor interactivity and production performance
- Built-in component dependency traversal ensures styles are scoped to actual page composition, not file structure