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.8.1/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.8.1/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.8.1Edit 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.