Loading repository data…
Loading repository data…
modernweb-dev / repository
The modern web setup for static sites with a sprinkle of JavaScript
Rocket is in public alpha. Expect APIs and documentation to keep improving before 1.0.
Rocket is a static-site metaframework for content sites and Web Component docs: HTML-first, zero JS by default, AI-friendly, and deployable anywhere.
config.path, independent of file
location.server, client, or hydrate:* per Registered Component.Rocket is not a SPA framework, React/Vite/Astro replacement, or backend application framework. Use it when the output should mostly be static HTML and the source should stay easy for humans and coding agents to inspect.
Use Start With AI when you want an agent to create the project shell, pages, layout, metadata, and Netlify config for you:
npm run build, and fix failures.Rocket requires Node.js 22 or newer.
For a manual project, install the package from npm:
npm install @rocket/js
npx rocket init
rocket init creates a compact Atlas docs starter, including rocket-config.js,
docs/pages/sharedData.js, starter Markdown Pages, a static JSON Page for a Request Demo, and a
removable project-local Rocket Agent Skill. It also adds npm scripts when the names are available:
{
"type": "module",
"scripts": {
"start": "rocket start",
"build": "rocket build"
},
"dependencies": {
"@rocket/js": "^0.1.0"
}
}
The generated rocket-config.js discovers general documentation Pages under docs/pages and
colocated component reference Pages under src:
/** @type {import('@rocket/js/types.js').RocketConfig} */
export default {
includeGlobs: ['docs/pages/**/*.rocket.{md,js}', 'src/**/*.rocket.{md,js}'],
};
The generated docs/pages/index.rocket.md gives you an Atlas hero home Page:
```js server
export const config = {
path: '/',
metadata: {
title: 'Rocket Site',
description: 'Documentation built with Rocket.',
},
menu: {
iconName: 'house',
order: 0,
},
};
import { atlasHeroLayout, atlasHeroComponents } from '@rocket/js/layouts/atlasHero.js';
import { heroData } from './sharedData.js';
export const components = atlasHeroComponents;
export const layout = pageData => atlasHeroLayout(pageData, heroData);
```
# Rocket Site
This starter is rendered with Rocket's Atlas hero layout.
Then run:
npm start
npm run build
The build writes static output to dist/:
dist/
|-- index.html
`-- assets/
Follow the Manual Quick Start when you want to create the smallest working project by hand.
Use Rocket for:
Do not use Rocket for:
Rocket optimizes the generated site output, not the npm dependency count. A Rocket project installs
@rocket/js and gets the build pipeline, Markdown processing, dev server, Lit-based server
rendering, and docs-layout affordances in one package. Visitor pages stay static by default, and
browser JavaScript is only emitted for loading strategies you choose.
Rocket is currently in public alpha at 0.1.x. APIs can change before 1.0.0;
breaking changes are documented through changesets and release notes.
Rocket is part of the Modern Web Family.
npm ci
npm start
npm run types
npm test
npm run lint
npm start runs the Rocket docs site. npm test runs the Node test suite.
We are always looking for contributors of all skill levels! If you're looking to ease your way into the project, try out a good first issue.
If you are interested in helping contribute to Modern Web, please take a look at our Contributing Guide. Also, feel free to drop into Discord and say hi. 👋
Become a financial contributor and help us sustain our community. [Contribute]
Rocket is released under the MIT License.