Skip to main content

Getting started

Start using Rivet in your project

Use via CDN #

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

CSS #

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

<link rel="stylesheet" href="https://unpkg.com/rivet-core@2.0.0-beta.4/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.0.0-beta.4/js/rivet.min.js"></script>
<script>Rivet.init();</script>

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.