Skip to main content
Solar is a runtime-based JavaScript UI framework designed around a single constraint most frameworks ignore: a large portion of the code targeting it won’t be written by a human. Solar makes component contracts explicit, validation errors machine-readable, and project structure rigid — so AI-generated code is predictably correct, not just probably correct. No compiler, no build step, no magic.

Introduction

Learn what Solar is, why it exists, and how it differs from React, Vue, and Svelte.

Installation

Scaffold a new project in one command, or drop Solar into any HTML file via CDN.

Quickstart

Build your first component with contract validation and state in under five minutes.

API Reference

Explore every public export: defineComponent, mountComponent, hooks, and more.

​
What makes Solar different

Solar is not a general-purpose framework. It is purpose-built for the properties of AI-generated code — code that is often correct in isolation but inconsistent across files, and that gets regenerated frequently rather than incrementally maintained.

Explicit contracts

Every component declares its prop types and requirements upfront. Nothing is inferred from usage or convention — the schema is the source of truth.

Structured errors

Contract violations throw a ContractError with a machine-readable JSON payload including the component name, prop, expected type, received type, and a suggested fix.

Component registry

Every registered component is discoverable via registry.manifest() — a full catalog an AI model can read before generating any composition code.

Runtime-based

No compiler, no transpilation, no build pipeline. Solar runs directly in the browser as standard ES modules, making it fully debuggable without source maps.

​
Get up and running

Whether you are starting a new project or integrating Solar into an existing page, you can go from zero to a running component in three steps.
1

Scaffold your project

Run the scaffold CLI to create a new Solar project with everything wired up:
npm create solar@latest my-app
2

Define a component

Open components/App.js and define your component with an explicit prop schema:
import { defineComponent, createElement, registry } from '../solar/index.js'

const Button = defineComponent({
  name: 'Button',
  props: {
    label: { type: 'string', required: true },
    onClick: { type: 'function', required: true },
    variant: { type: 'string', enum: ['primary', 'secondary'], default: 'primary' },
  },
  render({ label, onClick, variant }) {
    return createElement('button', { class: `btn btn--${variant}`, onclick: onClick }, label)
  },
})

registry.register(Button)
export default Button
3

Mount to the DOM

In main.js, mount your component to a DOM node:
import { mountComponent } from './solar/index.js'
import Button from './components/Button.js'

mountComponent(Button, {
  label: 'Click me',
  onClick: () => console.log('clicked'),
  variant: 'primary',
}, document.getElementById('app'))