Hello World

\n `);\n const [cssCode, setCssCode] = useState(`\nbody {\n font-family: Arial, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n background-color: #f0f0f0;\n}\n\n#app {\n text-align: center;\n padding: 20px;\n background-color: white;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n `);\n const [jsCode, setJsCode] = useState(`\ndocument.querySelector('#app h1').addEventListener('click', () => {\n alert('You clicked the heading!');\n});\n `);\n const [compiledCode, setCompiledCode] = useState('');\n\n const basicExtensions = [\n highlightSpecialChars(),\n drawSelection(),\n dropCursor(),\n EditorState.allowMultipleSelections.of(true),\n indentationMarkers(),\n foldGutter(),\n highlightActiveLine(),\n history(),\n syntaxHighlighting(defaultHighlightStyle),\n EditorView.lineWrapping,\n EditorState.tabSize.of(2),\n EditorView.theme({\n '&': { height: '100%' },\n '.cm-scroller': { overflow: 'auto' }\n }),\n EditorState.phrases.of({\n \"next\": \"Next\",\n \"previous\": \"Previous\",\n \"autocomplete\": \"Autocomplete\"\n }),\n defaultKeymap,\n historyKeymap,\n indentWithTab\n ];\n\n useEffect(() => {\n const combinedCode = `\n \n \n \n \n \n ${htmlCode}\n \n \n \n `;\n setCompiledCode(combinedCode);\n }, [htmlCode, cssCode, jsCode]);\n\n return (\n

HTML

\n setHtmlCode(value)}\n theme=\"dark\"\n />\n

CSS

\n setCssCode(value)}\n theme=\"dark\"\n />\n

JavaScript

\n setJsCode(value)}\n theme=\"dark\"\n />\n

Hello World

HTML

CSS

JavaScript

Preview