kodeWeave is your on-the-go coding playground!
kodeWeave is a real-time coding playground designed for developers, offering a feature-rich environment similar to CodePen, but with built-in APIs, offline support, and PWA exportation. It allows users to prototype apps, websites, and games quickly, whether on mobile or desktop, all without relying on external servers.
With lightning-fast performance, kodeWeave leverages JavaScript Proxies, a custom Virtual DOM, and a diffing algorithm to optimize speed and efficiency—delivering Lighthouse scores unmatched by other coding playgrounds.
✅ Live HTML, CSS, and JavaScript Editing – Instant, real-time preview.
✅ Built-in APIs – Easily import images, SVGs, and audio from Openverse and Iconify.
✅ Supports Popular Frameworks – Start projects with React, Vue, Angular, TypeScript, Alpine, Solid, Preact, Mithril, Hyperapp, Aurelia, Lit, Knockout, Moon, Stimulus, and more.
✅ Client-Side Only – No backend required; works entirely in the browser.
✅ Instant CSS Updates – Changes in the CSS tab update the style tag directly in the preview without reloading the page, making styling interactive elements like modals seamless.
✅ PWA Export – Convert your project into a fully functional Progressive Web App (PWA).
✅ Offline-Ready – Service workers ensure projects work offline.
✅ File Uploads to Base64 – Upload any file and instantly convert it to Base64.
✅ Virtual Device Preview – View how your project looks on desktop and mobile.
✅ Code Tidy & Formatting – Auto-format messy code with one click.
✅ Built-in Terminal – See JavaScript errors in real-time.
✅ Light & Dark Mode – Supports theme switching (also works in PicoCSS projects).
✅ JS, Babel, ES6 Support – Work with modern JavaScript seamlessly.
✅ Emmet Integration – Speed up HTML and CSS coding.
✅ Share to CodePen – Export and share your project instantly.
✅ URL-Based Sharing – Save and share projects via Base64-encoded URLs.
✅ Website Screenshot Tool – Capture project previews with a single click.
kodeWeave uses a number of open-source projects to work properly:
- CodeMirror v6 – Powerful web-based text editor.
- html2canvas – Capture screenshots in JavaScript.
- JSZip – Package ZIP files locally in JavaScript.
- FileSaver.js – Allows local file saving in JavaScript (prebuilt with JSZip).
- cdnjs – Enables easy addition of the latest libraries and frameworks via search.
- Emmet – CodeMirror plugin for Zen Coding.
- Pico.css and Tailwind CSS – Styles the application’s interface.
- HeroIcons and Font Awesome – Icon libraries used in the UI. (Twitter logo icon was custom-designed.)
- Openverse API – Enables users to search for images and audio files for their weave.
- Iconify API – Allows users to search and add vector graphics (SVGs) to their weave.
kodeWeave has been highlighted on several notable platforms:
kodeWeave is fully web-based – no installation needed. Try it now:
➡️ kodeWeave Online
Or, to run locally:
git clone https://github.com/michaelsboost/kodeWeave.git cd kodeWeave`
To preview kodeWeave locally, use a simple Python server:
bash
python3 -m http.server 8000`
Then, open http://localhost:8000 in your browser.
kodeWeave makes exporting a Progressive Web App (PWA) effortless.
- Create your project in kodeWeave.
- Click Export as PWA.
- A ZIP file will be generated with:
index.html(your project’s entry point)sw.js(service worker for offline support)manifest.json(PWA metadata)- All necessary assets
- Extract and upload to your web server!
Unlike other coding playgrounds, kodeWeave achieves top-tier performance thanks to a custom Virtual DOM & Diffing Algorithm built with JavaScript Proxies.
✅ Performance: 100
✅ Accessibility: 93
✅ Best Practices: 100
✅ SEO: 100
kodeWeave has been used to create powerful applications, including:
A progressive survival application designed to provide offline survival knowledge, built entirely with kodeWeave.
A clean, minimalist fitness timer for interval training, workouts, stretching, and daily movement routines—adaptable to any fitness style.
Sharpen your trader’s intuition with this interactive technical analysis dojo, where practice, consistency, and progression forge real-world chart mastery.
kodeWeave is open-source under the MIT License.
See the full license: LICENSE.
Awesome! kodeWeave is free and open-source, and contributions are always welcome.
🔹 Submit a Pull Request – Found a bug? Have a feature idea? Let's build together!
🔹 Spread the Word – Share kodeWeave with fellow developers & creators.
🔹 Fork & Experiment – kodeWeave is yours to play with—have fun with it!
If kodeWeave has been helpful to you, here are some ways you can show support:
☕ Buy me a coffee: ko-fi.com/michaelsboost
🎨 Grab some of my art prints: DeviantArt Store
👕 Get a kodeWeave T-shirt or gear: Merch Store
📚 Check out my Graphic Design Course: Learn Design
🛒 Register as a customer on my store: Visit Store
💙 Donate via PayPal: Support via PayPal
💸 Donate via Cash App: Support via SquareCash
Your support helps keep kodeWeave free, open-source, and constantly improving. 🚀
For questions, feature requests, or collaborations, reach out to:
Michael Schwartz – michaelsboost.com