I built an open source Codepen alternative – Devcanvas

DevCanvas (devcanvas.art) began as a fun experiment born from my journey learning SvelteKit and Supabase. What started as a simple platform for storing code snippets quickly evolved into something much more cooler: an online editor that makes it easy to prototype and share ideas quickly and effortlessly.

The Evolution

A platform for storing code snippets, an idea I conceived while helping someone debug their code. The platform used to be called snippetland, but after getting deep in building and also trying to establish the name and stuff, i realized that another service named snippetland that does the same thing (even better) exists.

Lesson: Don’t be foolish to think you’ve come up with a unique name 😅. as wisely said, “There’s nothing new under the sun”.

Snippetland early twitter posts:

// Detect dark theme
var iframe = document.getElementById(‘tweet-1690427906751651841-366’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1690427906751651841&theme=dark”
}

The current form, which is a full-fledged online editor with cool features was just an experimentation. I first demoed it on twitter a long time ago.

// Detect dark theme
var iframe = document.getElementById(‘tweet-1701642073546334375-691’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1701642073546334375&theme=dark”
}

// Detect dark theme
var iframe = document.getElementById(‘tweet-1703859320478212173-255’);
if (document.body.className.includes(‘dark-theme’)) {
iframe.src = “https://platform.twitter.com/embed/Tweet.html?id=1703859320478212173&theme=dark”
}

Seeing these again, devcanvas has definitely come a really long way.

Storing snippets still exists on DevCanvas, but haven’t gotten any updates for a while now.

Key Features of Devcanvas

• Easy prototyping
• Effortless sharing
• Real-time editing (i.e fast previews)
• Super neat interface (from my perspective at least)

Got myself into a trial and error loop making the preview as fast as possible, most of the problem coming from network resource the might be brought in into the editor. Whoa, I just conceived a superb idea while writing this (would implement later).

Tech Stack

Devcanvas is built with Sveltekit, TailwindCSS, Supabase and no Typescript (I wish I did though).

Though not the coolest or hardest product to build or make money from, The process of building it was incredibly enjoyable, and using it is just as fun – hence the tagline, “The Editor with Super Powers”.

Currently, DevCanvas is completely free to use.

Open Source

DevCanvas is proudly open source, even though, It has always just been me building this for while. I hope to get others involved in this as will to make DevCanvas even better and cooler.

Warning: Lots of technical debt and ugly code, but i’m working to make it better for contribution.

Have questions, suggestions, critique or feedback, I’d love to hear from you!

Visit https://devcanvas.art

PS: we’re live on product hunt today: would appreciate your support. https://www.producthunt.com/posts/devcanvas

Also checkout my next product CommentRig (www.commentrig.com) – A modern comment management for websites.

Stay Subtle 💛!