Skip to main content
Solar gives you three ways to get started, depending on where you are in your project. The scaffold CLI is the recommended path for new projects — it creates a complete directory structure with Solar wired up and a dev server ready to run. If you want to try Solar without any setup, the CDN import lets you drop it into any HTML file in seconds. Once npm publishing is available, you’ll also be able to install Solar as a package dependency in bundler-based projects.
The scaffold CLI requires Node.js 18 or later. Run node --version to check before proceeding.
The scaffold CLI creates a new project directory with Solar’s framework files, a starter component, and a working entry point — all wired together and ready to run.
1

Run the scaffold command

Pass your project name as the first argument:
npm create solar@latest my-app
The CLI creates a my-app/ directory with the following structure:
my-app/
├── index.html
├── main.js
├── package.json
├── solar/          # Solar framework (local copy)
└── components/
    └── App.js
main.js mounts your root App component. solar/ contains a local copy of the Solar framework — no network dependency at runtime.
2

Install dependencies and start the dev server

Move into your new project directory and start the server:
cd my-app
npm run dev
3

Open your app

Navigate to http://localhost:3000 in your browser. You’ll see the starter App component running with a live counter. Edit components/App.js and the page updates immediately.

​
CDN

The fastest way to get Solar running with no install and no configuration. Import Solar directly from jsDelivr in any HTML file and open it in a browser. 
<!DOCTYPE html>
<html>
  <head><title>My Solar App</title></head>
  <body>
    <div id="app"></div>
    <script type="module">
      import { defineComponent, mountComponent, useState, createElement } from 'https://cdn.jsdelivr.net/gh/Stahlwalker/framework-solar@main/framework/index.js'

      const App = defineComponent({
        name: 'App',
        props: {},
        render() {
          const [count, setCount] = useState(0)
          return createElement('div', {},
            createElement('p', {}, `Count: ${count}`),
            createElement('button', { onclick: () => setCount(c => c + 1) }, '+'),
          )
        },
      })

      mountComponent(App, {}, document.getElementById('app'))
    </script>
  </body>
</html>
Save the file and open it directly in your browser — no server required. This is the best option for quick experiments or when adding Solar to a static page.

​
npm

npm publishing is coming soon. Use the CDN import above in the meantime. The import path shown below reflects the API once the package is published.
Once the solar package is published, install it as a regular dependency: 
npm install solar
Then import from the package name in any bundler-based project: 
import { defineComponent, mountComponent, useState, createElement, registry } from 'solar'

​
Project structure

Solar enforces a rigid file structure so that generated components are always predictable and machine-readable. When you scaffold a project or add components manually, follow these rules exactly. 
my-app/
├── index.html
├── main.js           # mounts root components
└── components/
    ├── Button.js     # one component per file
    ├── Counter.js
    └── UserCard.js
Three rules apply to every component file:
  • One component per file. Do not define multiple components in one file.
  • File name matches the component name. A component named Button lives in Button.js. A component named UserCard lives in UserCard.js.
  • Default export is always the defineComponent call. Every component file ends with export default ComponentName.
These rules exist so an AI model — or any automated tool — can locate, read, and regenerate a component file without any additional context about how the project is organized.