HTML

CSS

Preview

let htmlEditor, cssEditor, jsEditor; const libraries = { js: { jquery: "https://code.jquery.com/jquery-3.6.0.min.js", react: [ "https://unpkg.com/react@17/umd/react.development.js", "https://unpkg.com/react-dom@17/umd/react-dom.development.js" ], vue: "https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js", angular: [ "https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js" ], threejs: "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js", d3: "https://d3js.org/d3.v7.min.js", p5js: "https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js", babylonjs: "https://cdn.babylonjs.com/babylon.js", phaser: "https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js", pixijs: "https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.2.0/browser/pixi.min.js", chartjs: "https://cdn.jsdelivr.net/npm/chart.js", lodash: "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js", moment: "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js", gsap: "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js", aos: [ "https://unpkg.com/aos@2.3.1/dist/aos.css", "https://unpkg.com/aos@2.3.1/dist/aos.js" ], leaflet: [ "https://unpkg.com/leaflet@1.7.1/dist/leaflet.css", "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" ], anime: "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" }, css: { bootstrap: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css", tailwind: "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css", bulma: "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css", foundation: "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css", materialize: "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css", semantic: "https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css", uikit: "https://cdn.jsdelivr.net/npm/uikit@3.11.1/dist/css/uikit.min.css" }, icon: { fontawesome: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css", material: "https://fonts.googleapis.com/icon?family=Material+Icons", ionicons: "https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js", feather: "https://unpkg.com/feather-icons/dist/feather.min.js" } }; let selectedLibraries = { js: [], css: [], icon: [] }; document.addEventListener('DOMContentLoaded', () => { ace.require("ace/ext/language_tools"); htmlEditor = createEditor("html-editor", "ace/mode/html"); cssEditor = createEditor("css-editor", "ace/mode/css"); jsEditor = createEditor("js-editor", "ace/mode/javascript"); [htmlEditor, cssEditor, jsEditor].forEach(editor => { editor.getSession().on("change", updatePreview); }); // Set initial content for each editor htmlEditor.setValue("\n \n My Page\n \n \n

Hello, World!

\n \n"); cssEditor.setValue("body {\n font-family: Arial, sans-serif;\n background-color: #f0f0f0;\n}\n\nh1 {\n color: #333;\n}"); jsEditor.setValue("console.log('Welcome to the JavaScript editor!');\n\n// Your code here"); // Move cursor to the start of each editor [htmlEditor, cssEditor, jsEditor].forEach(editor => { editor.gotoLine(1); }); updatePreview(); setupResolutionSelector(); setupLibraryMenu(); setupSaveButton(); }); function createEditor(id, mode) { const editor = ace.edit(id); editor.session.setMode(mode); editor.setTheme("ace/theme/monokai"); editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, fontSize: "14px", showPrintMargin: false, highlightActiveLine: false, showGutter: true }); return editor; } function updatePreview() { const html = htmlEditor.getValue(); const css = cssEditor.getValue(); const js = jsEditor.getValue(); const previewFrame = document.getElementById('preview'); let libraryScripts = ''; let libraryStyles = ''; // Add selected libraries Object.entries(selectedLibraries).forEach(([type, libs]) => { libs.forEach(lib => { const libSources = Array.isArray(libraries[type][lib]) ? libraries[type][lib] : [libraries[type][lib]]; libSources.forEach(src => { if (src.endsWith('.css')) { libraryStyles += ``; } else { libraryScripts += `

Available Libraries

Selected Libraries

Hello, World!