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.