{"id":20719472,"url":"https://github.com/michaelsboost/kodeweave","last_synced_at":"2025-04-23T14:16:49.521Z","repository":{"id":166926166,"uuid":"608683640","full_name":"michaelsboost/kodeWeave","owner":"michaelsboost","description":"kodeWeave is your on the go coding playground! Design with TailwindCSS or Pico.css, see how your app or website will look and behave on a desktop.","archived":false,"fork":false,"pushed_at":"2025-04-19T04:01:49.000Z","size":54667,"stargazers_count":8,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-23T14:16:31.434Z","etag":null,"topics":["code","coding","development","development-environment","html","javascript","kodeweave","pico-css","picocss","playground","tailwind","tailwind-css","tailwindcss"],"latest_commit_sha":null,"homepage":"https://michaelsboost.com/kodeWeave/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michaelsboost.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-03-02T14:27:03.000Z","updated_at":"2025-04-19T04:01:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"7af6c47e-6d1a-4cbc-b59b-a66c24d6ce61","html_url":"https://github.com/michaelsboost/kodeWeave","commit_stats":null,"previous_names":["michaelsboost/kodeweave"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelsboost%2FkodeWeave","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelsboost%2FkodeWeave/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelsboost%2FkodeWeave/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelsboost%2FkodeWeave/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaelsboost","download_url":"https://codeload.github.com/michaelsboost/kodeWeave/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250447981,"owners_count":21432165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code","coding","development","development-environment","html","javascript","kodeweave","pico-css","picocss","playground","tailwind","tailwind-css","tailwindcss"],"created_at":"2024-11-17T03:17:22.637Z","updated_at":"2025-04-23T14:16:49.515Z","avatar_url":"https://github.com/michaelsboost.png","language":"JavaScript","funding_links":["https://ko-fi.com/michaelsboost","http://ko-fi.com/michaelsboost"],"categories":[],"sub_categories":[],"readme":"\n# **kodeWeave**\n\n_kodeWeave is your on-the-go coding playground!_\n\n![kodeWeave](https://raw.githubusercontent.com/michaelsboost/kodeWeave/main/imgs/screenshot.png)\n\n[![MIT License](https://img.shields.io/github/license/michaelsboost/kodeWeave)](LICENSE) [![GitHub Stars](https://img.shields.io/github/stars/michaelsboost/kodeWeave)](https://github.com/michaelsboost/kodeWeave/stargazers) [![GitHub Issues](https://img.shields.io/github/issues/michaelsboost/kodeWeave)](https://github.com/michaelsboost/kodeWeave/issues)\n\n----------\n\n## **🚀 About kodeWeave**\n\nkodeWeave 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.\n\nWith **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**.\n\n----------\n\n## **🌟 Features**\n\n✅ **Live HTML, CSS, and JavaScript Editing** – Instant, real-time preview.  \n✅ **Built-in APIs** – Easily import images, SVGs, and audio from Openverse and Iconify.  \n✅ **Supports Popular Frameworks** – Start projects with React, Vue, Angular, TypeScript, Alpine, Solid, Preact, Mithril, Hyperapp, Aurelia, Lit, Knockout, Moon, Stimulus, and more.  \n✅ **Client-Side Only** – No backend required; works entirely in the browser.  \n✅ **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.  \n✅ **PWA Export** – Convert your project into a fully functional **Progressive Web App (PWA)**.  \n✅ **Offline-Ready** – Service workers ensure projects work offline.  \n✅ **File Uploads to Base64** – Upload any file and instantly convert it to Base64.  \n✅ **Virtual Device Preview** – View how your project looks on desktop and mobile.  \n✅ **Code Tidy \u0026 Formatting** – Auto-format messy code with one click.  \n✅ **Built-in Terminal** – See JavaScript errors in real-time.  \n✅ **Light \u0026 Dark Mode** – Supports theme switching (also works in **PicoCSS** projects).  \n✅ **JS, Babel, ES6 Support** – Work with modern JavaScript seamlessly.  \n✅ **Emmet Integration** – Speed up HTML and CSS coding.  \n✅ **Share to CodePen** – Export and share your project instantly.  \n✅ **URL-Based Sharing** – Save and share projects via **Base64-encoded URLs**.  \n✅ **Website Screenshot Tool** – Capture project previews with a single click.\n\n----------\n\n## **🛠️ Tech Stack**\n\nkodeWeave uses a number of open-source projects to work properly:\n\n-   **[CodeMirror v6](http://codemirror.net/)** – Powerful web-based text editor.\n-   **[html2canvas](https://html2canvas.hertzen.com/)** – Capture screenshots in JavaScript.\n-   **[JSZip](https://stuk.github.io/jszip/)** – Package ZIP files locally in JavaScript.\n-   **[FileSaver.js](https://github.com/eligrey/FileSaver.js/)** – Allows local file saving in JavaScript (prebuilt with JSZip).\n-   **[cdnjs](https://cdnjs.com/api)** – Enables easy addition of the latest libraries and frameworks via search.\n-   **[Emmet](http://emmet.io/)** – CodeMirror plugin for Zen Coding.\n-   **[Pico.css](https://picocss.com/)** and **[Tailwind CSS](https://tailwindcss.com/)** – Styles the application’s interface.\n-   **[HeroIcons](https://heroicons.com/)** and **[Font Awesome](https://fontawesome.com/)** – Icon libraries used in the UI. _(Twitter logo icon was custom-designed.)_\n-   **[Openverse API](https://docs.openverse.org/api/guides/documentation.html)** – Enables users to search for images and audio files for their weave.\n-   **[Iconify API](https://iconify.design/docs/api/)** – Allows users to search and add vector graphics (SVGs) to their weave.\n\n----------\n\n## **📰 Featured On**\n\nkodeWeave has been highlighted on several notable platforms:\n\n- [**Web Designer Depot**](https://www.webdesignerdepot.com/5-essential-open-source-tools-for-web-designers/)  \n- [**List Of Freeware**](https://listoffreeware.com/free-open-source-dreamweaver-alternative-software-windows/)  \n- [**Bootstrap Dash**](https://www.bootstrapdash.com/blog/codepen-alternatives)  \n- [**APTRON**](https://aptronnoida.in/blog/essential-open-source-tools-for-web-designers/)  \n- [**Linux for Devices**](https://www.linuxfordevices.com/tutorials/linux/adobe-dreamweaver-alternatives)  \n\n----------\n\n## **📥 Installation \u0026 Setup**\n\nkodeWeave is **fully web-based** – no installation needed. Try it now:  \n➡️ [kodeWeave Online](https://michaelsboost.com/kodeWeave/go)\n\nOr, to run locally:\n\n### **Clone the Repository**\n\n\u003e git clone \n\u003e https://github.com/michaelsboost/kodeWeave.git \n\u003e cd kodeWeave` \n\n### **Start a Local Server**\n\nTo preview kodeWeave locally, use a simple Python server:\n\nbash\n\n\u003e python3 -m http.server 8000` \n\nThen, open `http://localhost:8000` in your browser.\n\n----------\n\n## **📦 Exporting a PWA**\n\nkodeWeave makes exporting a **Progressive Web App (PWA)** effortless.\n\n### **Steps to Export a PWA:**\n\n1.  Create your project in kodeWeave.\n2.  Click **Export as PWA**.\n3.  A ZIP file will be generated with:\n    -   `index.html` (your project’s entry point)\n    -   `sw.js` (service worker for offline support)\n    -   `manifest.json` (PWA metadata)\n    -   All necessary assets\n4.  Extract and upload to your web server!\n\n----------\n\n## **⚡ Performance \u0026 Lighthouse Scores**\n\nUnlike other coding playgrounds, kodeWeave achieves **top-tier performance** thanks to a custom **Virtual DOM \u0026 Diffing Algorithm** built with **JavaScript Proxies**.\n\n### **Lighthouse Scores**\n\n✅ **Performance:** `100`  \n✅ **Accessibility:** `93`  \n✅ **Best Practices:** `100`  \n✅ **SEO:** `100`\n\n![Lighthouse Scores](https://raw.githubusercontent.com/michaelsboost/kodeWeave/main/imgs/lighthouse.png)\n\n----------\n\n## **🎮 Projects Built with kodeWeave**\n\nkodeWeave has been used to create powerful applications, including:\n\n### **🎯 [Beacon Survival App](https://michaelsboost.com/Beacon)**\n\nA **progressive survival application** designed to provide **offline survival knowledge**, built entirely with kodeWeave.\n\n### **🎲 [Character Party](https://michaelsboost.com/Character-Party)**\n\nA **character brainstorming tool** that generates unique character ideas by combining quirky job titles, moods, and animals. It even includes **hyperlinks** for deeper exploration.\n\n----------\n\n## **📜 License**\n\nkodeWeave is **open-source** under the **MIT License**.  \nSee the full license: [LICENSE](https://github.com/michaelsboost/kodeWeave/blob/main/LICENSE).\n\n----------\n\n## **💡 Want to Contribute?**\n\nAwesome! kodeWeave is **free and open-source**, and contributions are always welcome.\n\n### **How You Can Help:**\n\n🔹 **Submit a Pull Request** – Found a bug? Have a feature idea? Let's build together!  \n🔹 **Spread the Word** – Share kodeWeave with fellow developers \u0026 creators.  \n🔹 **Fork \u0026 Experiment** – kodeWeave is yours to play with—have fun with it!\n\nIf kodeWeave has been helpful to you, here are some ways you can show support:\n\n[![ko-fi](https://storage.ko-fi.com/cdn/useruploads/d666bcdd-8d38-47d4-b78b-018d4b726d48.png)](https://ko-fi.com/michaelsboost)\n\n☕ **Buy me a coffee:** [ko-fi.com/michaelsboost](http://ko-fi.com/michaelsboost)  \n🎨 **Grab some of my art prints:** [DeviantArt Store](https://deviantart.com/michaelsboost/prints)  \n👕 **Get a kodeWeave T-shirt or gear:** [Merch Store](https://michaelsboost.com/gear)  \n📚 **Check out my Graphic Design Course:** [Learn Design](https://michaelsboost.com/graphicdesign)  \n🛒 **Register as a customer on my store:** [Visit Store](https://michaelsboost.com/store)  \n💙 **Donate via PayPal:** [Support via PayPal](https://michaelsboost.com/donate)  \n💸 **Donate via Cash App:** [Support via SquareCash](https://cash.me/$michaelsboost)\n\nYour support helps keep kodeWeave free, open-source, and constantly improving. 🚀\n\n----------\n\n## **📧 Contact**\n\nFor questions, feature requests, or collaborations, reach out to:  \n**Michael Schwartz** – [michaelsboost.com](https://michaelsboost.com/)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelsboost%2Fkodeweave","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaelsboost%2Fkodeweave","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelsboost%2Fkodeweave/lists"}