Cookieless Alternative To Embed HTML, CSS And JS Code Snippets
When we implement websites today, we are confronted by a lot of things we need to take care of. Ideally, we want to have a fast, secure, accessible, and fair website. At the same time, we want to have an interactive website with comments, polls, videos, code examples, and many more.
Let’s have a look:
Indiepen is a privacy-friendly, lightweight, and accessible solution to embed code examples. In fact, we don’t set any cookies or tracking!
Indiepen can preview every website that follows a very simple convention. You need to provide a website with the following file structure:
. ├── index.html ├── main.js └── styles.css
Deploy the code example with your favorite hosting provider (e.g. GitHub Pages, Netlify, or Vercel) and copy the URL. After that, go to our start page and use the code snippet generator.
The generated code looks like this:
<iframe class="indiepen" src="https://indiepen.tech/embed/?url=https%3A%2F%2Findiepen.tech%2Fexample%2F&tab=result" style="width: 100%; overflow: hidden; display: block; border: 0;" title="Indiepen Embed" loading="lazy" width="100%" height="450"> </iframe>
You can now use the code snippet and integrate it on your website. That’s it! You should now see your code example with an editor to discover the code.
Under The Hood
Indiepen is our first open-source project and we are very excited to share our ideas with you. We would love to get feedback and have discussions about a fair web. Get in touch with me on Twitter or check out the project on GitHub.
Happy coding, everyone!