Skip to main content

Getting started

Start using Rivet in your project

Hosted assets #

The quickest way to get started with Rivet is using the CDN-hosted versions of the CSS and JavaScript files.

The Rivet documentation uses unpkg, but you can also use any CDN that serves npm packages, such as jsdelivr.


Copy and paste this link into your document before any other stylesheets.

<link rel="stylesheet" href="">

JavaScript #

Copy and paste the script tags below into your document right before the closing </body> tag.

<script src=""></script>

Install using npm #

If you are using npm to manage your project’s dependencies, you can install the rivet-core package:

npm i rivet-core@2.8.0

Edit on CodePen #

If you’d like to experiment with Rivet in your browser, each component and layout features an Edit on CodePen button as shown below:

Clicking the Edit on CodePen button will open the component or layout in a new tab where you can edit its markup and see a live preview. The CodePen editor imports all Rivet styles and JavaScript, so you can add any utility classes or components you’d like.

Use the CodePen editor to get a feel for how Rivet works, experiment with new component and layout designs, or draft entire test pages.

If you create a free CodePen account, you can also save your work and share it with others. This can be especially helpful when demonstrating bugs or suggesting new features.