Nordcaft core concepts

Nordcraft is built around several fundamental concepts that form the foundation of the Web Development Engine. Understanding these core concepts will help you work more effectively with Nordcraft before you begin your first project.

Nordcraft combines visual development with a solid code foundation. This hybrid approach means:

• You can build visually while the system generates clean, optimized code
• Visual changes are reflected immediately in the interface
• Complex interactions can be implemented using visual development through workflows
• Custom code can be added when needed for specialized functionality

This approach bridges the gap between visual design tools and coding environments, eliminating traditional handoffs between designers and developers, and removing the time-consuming setup processes of traditional development environments.

Explore the editor to see how this works in practice.

Nordcraft is built and optimized around using a component-based architecture in your projects:

• Components are reusable, self-contained pieces of interface and functionality
• Each component has its own structure, styling and behavior
• Components can be composed together to create more complex interfaces
• Components maintain encapsulation of their internal state and logic

This component-based approach promotes reusability, maintainability and collaboration among team members. Learn how to create your own components to build a modular application.

Nordcraft organizes work into two main project types:

• Apps are complete applications with pages and functionality
• Packages are collections of reusable components and functions

Packages can be published and shared across projects, making them ideal for common functionality. Learn more about creating and launching packages to share your work.

Nordcraft includes built-in version control through its branching system:

• The main branch represents the live version of your project
• Create new branches for developing features or fixes
• Preview changes before publishing
• Branches are published to main when work is complete

This git-like workflow enables collaboration and maintains stability in your projects. For best practices, check out our guide on effective branching strategies.

Pages form the foundation of applications in Nordcraft:

• Each page has a unique URL path
• Pages can accept parameters for dynamic content
• Pages contain components and elements
• SEO metadata is configured at the page level

The page structure creates the overall navigation framework for your application. Learn how to create pages and set up their configuration.

Nordcraft uses a reactive data model built on signals:

• Variables store state within components and pages
• Formulas transform data through pure functions
• Workflows implement interactive behavior
• Contexts share data between components
• When data changes, the interface updates automatically

This reactive approach ensures your interface stays in sync with underlying data. Learn about working with variables and creating formulas to implement dynamic behavior.

Nordcraft supports both server-side rendering (SSR) and client-side rendering (CSR):

• SSR improves initial page load speed and is essential for search engine optimization (SEO)
• CSR enables rich interactivity after the initial page load
• The Nordcraft Web Development Engine intelligently handles the transition between these modes

This hybrid rendering approach provides the best of both worlds for performance and user experience.

When working with APIs, you can configure which requests are processed during SSR or whether they are processed on the client after the initial page has loaded.

External data is connected through the API integration system:

• Configure endpoints to connect to any back end
• Handle authentication securely
• Transform and use response data in your interface
• Set up real-time data with streaming connections

The API interface in Nordcraft forms the bridge between your front end and any back-end services. You can also connect to specialized back-end providers through services.

Ready to start building? Head to the Get started section to learn how to create your first project.