Vibe
Coded

A joyful collection of open-source tools and digital experiments, crafted with code for fun.

Explore Projects View on GitHub →

Tools & Utilities

CodePen Converter

Elegantly split a single HTML file into its component parts for CodePen, with a rich editor.

Launch Tool

New Tool Coming Soon

This space is ready for the next great idea.

Stories & Slides

JSDoc Type Safety

An interactive story exploring a modern, robust framework for type-safe JavaScript without transpilation.

Launch Story

Next Story

Loading...

Reusable Components

Feel free to use these self-contained web components in your own projects.

EXPERIMENTAL: USE WITH CAUTION

These components are "hot-loaded" from a live URL. Do not rely on them for production use. Their APIs and locations are subject to breaking changes at any time without notice.

<code-block>

A self-contained code viewer with syntax highlighting and a copy button.

Usage:

Instructions:

Set the language with the language attribute. For unescaped HTML, wrap your code in a <script type="text/template">. For other languages, use a <pre><code> block.

Show Examples
Preferred Method:
Fallback Method (to avoid escaping HTML):
<code-block language="html">
    <script type="text/template">
        <div class="example">
            <p>This HTML is rendered correctly.</p>
        </div>
    </script>
</code-block>

<kinetic-background>

A self-contained particle effect background that respects `prefers-reduced-motion`.

Usage:

The Why & The Vibe

What is "vibe coding"?

It's a spin on the developer joke "vibe-driven development." It means building things based on intuition, aesthetics, and the joy of creation, rather than strict metrics. The only KPI is "how cool is this?".

Who builds these projects?

These projects are almost exclusively developed in collaboration with AI assistants, guided by me (Pelle Wessman). The AI handles the bulk of the boilerplate and implementation, which allows us to rapidly prototype and explore ideas that would otherwise take too long to build from scratch.

But isn't using AI... complicated?

It is. We're aware of the valid concerns around AI—its impact on the planet, on creative fields, and on developer jobs. This exploration isn't about blindly accepting a new technology. It's about a professional responsibility to understand it. You can't critique a tool, or use it effectively, without knowing its strengths and its limits. It’s about learning and evaluating, not just adopting. Know the tool, not just the trend.