OSI-licensed only · self-hostable
CodePen is a hosted social playground for front-end code. Open-source tools fall into two groups: playgrounds you can host or run offline, and components or editors you embed in your own site.
Every tool below is under an OSI-approved licence (MIT or Apache-2.0), checked against its repository.
Licences checked against each repository on November 7, 2026.
| Tool | Best for | Licence | Runs as |
|---|---|---|---|
| LiveCodes | Closest CodePen-style playground | MIT | Server |
| Web Maker | Offline front-end experiments | MIT | Desktop app |
| Sandpack | Embedding live code in your docs | Apache-2.0 | Server |
| code-server | Full editor in the browser | MIT | Docker |
| OpenVSCode Server | Upstream VS Code in the browser | MIT | Docker |
Best for: Closest CodePen-style playground
A free, open-source, client-side code playground supporting React, Vue, Python and 90+ other languages and frameworks.
Best for: Offline front-end experiments
An offline, fast front-end code editor for web experiments, similar to CodePen or JSFiddle.
Best for: Embedding live code in your docs
A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.
Best for: Full editor in the browser
Lets you run VS Code on a remote machine and access it through a web browser.
Best for: Upstream VS Code in the browser
Runs upstream VS Code on a remote machine with access through a modern web browser from any device.
One email a week with the open-source projects, launches and releases added to TechLogHub. Unsubscribe in one click.
One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.
| If you need… | Start with |
|---|---|
| CodePen-style playground | LiveCodes |
| Offline experiments | Web Maker |
| Live examples in your docs | Sandpack |
| A browser IDE for projects | code-server or OpenVSCode Server |
| A hosted-style service with gallery | None of these match CodePen's community; use LiveCodes for the workflow |
Quick answers to common questions
CodePen is a hosted service. LiveCodes and Web Maker are open-source playgrounds with similar workflows.
LiveCodes is client-side and can be self-hosted, while code-server and OpenVSCode Server run on your own machine.
Sandpack, which is built to embed live-running editors.
Generally less than CodePen, which has a community. Check each one.
LiveCodes lists React, Vue and 90+ other languages and frameworks.
List it on TechLogHub and we'll review it for this page.
