Penweave is a CodePen‑like tool that lets users run their HTML/CSS/JS in a browser environment with secure preview and sharing. Built using React, Supabase, DaisyUI.
- Write code in HTML, CSS and JS.
- Generates instant live preview.
- Allows public and private projects.
- Public projects can be shared with anyone even those who don't use the platform.
- Allows to fork public projects and make your changes!
- Follow other creators, bookmark projects, like them...
There are essentially 2 projects. One is the platform itself and other one is the code runner which generates the preview. They communicate via the Postmessage API. They run on two different origins(domain) for security reasons.
- Clone repo
- Copy
.env.exampleto.envand fill in your Supabase credentials. TheVITE_CODE_RUNNER_URLis the URL of the runner that we run later. - Run
npm run dev - cd into
/runner - Copy its
.env.exampleto.envand fill the main app's URL. - Run
npm run dev
Now you should be able to access the project by the URL that outputted when you ran npm run dev in the root of the project /
The frontend of this app is React and as for the backend it is Supabase, You should set up a new project in Supabase and have its credentials.
To get Google OAuth working, enable it on your Supabase dashboard along with regular Email sign up.
Also don't forget to run supabase/schema.sql files content in your Supabase project to generate the necessary tables.
You should also change Supabase URL Configuration if necessary in the dashboard.
The inspiration is very much from Codepen.