Rocket Logo Rocket Guides Docs Blog Toggle darkmode

Launch: Preset

Rocket comes with a preset you will love. Simple, responsive and behaving like native, it sure is going to be a hit among your users.


Install @rocket/launch from the NPM repository using your favourite package manager.

npm i @rocket/launch
yarn add @rocket/launch
pnpm add @rocket/launch


👉 rocket.config.js

import { rocketLaunch } from '@rocket/launch';

/** @type {import('rocket/cli').RocketCliConfig} */
export default ({
  presets: [rocketLaunch()],


The launch preset configures 11ty data using a few overridable files:

  • site.cjs: Responsible for most of the site-wide config
  • rocketLaunch.json: configures the homepage layout
  • footer.json: Configures the content of the footer

Inline Notification

Launch ships with <inline-notification>, a custom element that applies some styles similar to "info boxes". The element works for <noscript> users as well, as long as you don't override the default noscript.css file.

To add an inline notification you need to remember to import the element definition:

```js script
import '@rocket/launch/inline-notification/inline-notification.js';

Then you can add your notification to the page. If you want to write the notification's content using markdown, just pad the opening and closing tags with empty lines.

There are three varieties of <inline-notification>, "tip", "warning", and "danger"

<inline-notification type="tip">

Take a tip from me


Take a tip from me

<inline-notification type="warning">

Be *sure* about this...


Be sure about this...

<inline-notification type="danger">

You **really** shouldn't!


You really shouldn't!

Modify the Title

The notification title defautls to it's type. You can write a custom title with the title attribute.

I am a success message

<inline-notification type="tip" title="success">

I am a success message


The title attribute does not change the title for <noscript> users, so don't include any critical information in it.