Examples#

These examples are small, live Rocket Pages. They are not complete example websites. Use them when you want to see one Rocket feature in a real Page file and compare the source with the rendered output.

Full example websites are still a goal. Until those exist, start with the tutorial when you want a multi-page project shape, then use these examples for focused implementation questions.

Page examples#

What Each Page Shows#

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'

Choose By Task#

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.
• Build a Site shows a multi-page project path.
• 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.