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.

CSS #

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

<link rel="stylesheet" href="https://unpkg.com/rivet-core@2.6.0/css/rivet.min.css">

JavaScript #

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

<script src="https://unpkg.com/rivet-core@2.6.0/js/rivet.min.js"></script>
<script>Rivet.init();</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.6.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.