A Code Playground That Just Works! An open-source client-side playground for React, Vue, Svelte, TypeScript, Python, Go, Ruby, PHP, Java, C# & 90+ languages 🚀
- Tweets1.3K
- Following532
- Followers1K
- Likes1.6K
![await using view = new Bun.WebView();
const script = '<script src="https://cdn.jsdelivr.net/npm/livecodes/livecodes.umd.js"></script>';
const url = `data:text/html;charset=UTF-8;base64,${btoa(script)}`;
await view.navigate(url);
const code = `import { useState } from "react";
export default () => {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
};`;
const html = await view.evaluate(`(async() => {
const playground = await livecodes.createPlayground({
headless: true,
config: { script: { language: 'react', content: ${JSON.stringify(code)} } },
});
const { result } = await playground.getCode();
return result;
})()`);
console.log(html);](https://pbs.twimg.com/media/HQVDOlgXYAABYsX.jpg?name=orig)
ALT await using view = new Bun.WebView(); const script = '<script src="https://cdn.jsdelivr.net/npm/livecodes/livecodes.umd.js"></script>'; const url = `data:text/html;charset=UTF-8;base64,${btoa(script)}`; await view.navigate(url); const code = `import { useState } from "react"; export default () => { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; };`; const html = await view.evaluate(`(async() => { const playground = await livecodes.createPlayground({ headless: true, config: { script: { language: 'react', content: ${JSON.stringify(code)} } }, }); const { result } = await playground.getCode(); return result; })()`); console.log(html);
ALT await using view = new Bun.WebView(); const script = '<script src="https://cdn.jsdelivr.net/npm/livecodes/livecodes.umd.js"></script>'; const url = `data:text/html;charset=UTF-8;base64,${btoa(script)}`; await view.navigate(url); const code = `import { useState } from "react"; export default () => { const [count, setCount] = useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; };`; const html = await view.evaluate(`(async() => { const playground = await livecodes.createPlayground({ headless: true, config: { script: { language: 'react', content: ${JSON.stringify(code)} } }, }); const { result } = await playground.getCode(); return result; })()`); console.log(html);
