Examples#

Examples are live, complete patterns you can compare against your own Rocket project. Use them after the tutorial path when you want to see one feature working in context.

For relaunch, Rocket needs three polished public examples: a marketing site, component-library docs, and an AI-generated site from a brief. The examples below are the current feature examples that support that launch set.

Available examples#

Feature examples#

Web Awesome Components#

Use Web Awesome custom elements in a Markdown Page with Rocket's component registration model.

This example covers:

• layout-provided Registered Components
• Web Awesome callouts, badges, details, avatars, and cards
• when to use a package component map instead of defining tags manually

Component Showcase With Demos#

Use js demo blocks to document Web Awesome's <wa-details> component with JavaScript Demos and source code.

This example covers:

• importing browser-ready package components for demos
• default, open, disabled, icon, and grouped states
• documenting an existing component with rendered examples
• Standalone Demo URLs for focused review

Server Time Page#

Render a request-time JavaScript Page that shows the current server timestamp and request details.

This example covers:

• .rocket.js Page shape
• render: 'server'
• using context.pageData with atlasDocLayout
• returning a complete Response

JavaScript Pages With Layouts#

Use the docs layout from static and server-rendered JavaScript Pages without constructing PageData by hand.

This example covers:

• the recommended JavaScript Page layout pattern
• static JavaScript Pages with concrete paths
• parameterized routes
• JSON responses versus HTML responses
• common layout mistakes

API Output#

Return JSON from a JavaScript Page and build it as a static file output.

This example covers:

• static .json route paths
• returning plain objects as JSON
• hiding API routes from navigation
• when to switch to render: 'server'

Choosing an example#

Start with Web Awesome Components when the Page is mostly Markdown and needs package components.

Use Component Showcase With Demos when a Page documents component usage, variants, states, and interactive behavior.

Use Server Time Page when you need a minimal working .rocket.js Page.

Use JavaScript Pages With Layouts when a JavaScript Page should still look like the rest of the docs site, whether it renders once at build time or runs at request time.

Use API Output when a JavaScript Page should return machine-readable JSON instead of an HTML document.

Related docs#

• Start With AI gives a Coding Agent a prompt for a deployable Rocket site.
• Manual Quick Start creates the smallest Rocket project.
• Pages documents Markdown Pages, JavaScript Pages, route paths, and render modes.
• Components explains Registered Components and Page-local Custom Elements.
• Component Loading helps choose server, client, or hydrate:*.
• Deploy explains static output and adapter output.
• Author Modules lists common @rocket/js imports for Pages and layouts.