├── vite.config.js ├── src ├── main.jsx ├── index.css ├── App.css ├── App.jsx └── assets │ └── react.svg ├── .gitignore ├── index.html ├── README.md ├── .eslintrc.cjs ├── package.json └── public └── vite.svg /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500;700&display=swap'); 2 | 3 | * 4 | { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | font-family: 'Roboto', sans-serif; 9 | } 10 | 11 | body{ 12 | background: #36393e; 13 | color: white; 14 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ReactJs-Code Editor 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "code_editor", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.15", 18 | "@types/react-dom": "^18.2.7", 19 | "@vitejs/plugin-react": "^4.0.3", 20 | "eslint": "^8.45.0", 21 | "eslint-plugin-react": "^7.32.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.3", 24 | "vite": "^4.4.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .playground{ 2 | padding: 20px; 3 | display: flex; 4 | height:100vh; 5 | width:100% 6 | } 7 | 8 | .left,.right{ 9 | flex-basis: 50%; 10 | padding: 10px; 11 | } 12 | .right{ 13 | text-align: center; 14 | } 15 | .right button{ 16 | margin: 0.5rem; 17 | padding: 0.5rem; 18 | font-size: 1.2; 19 | background: green; 20 | cursor: pointer; 21 | border-radius: 0.3rem; 22 | width: 80px; 23 | height: 40px; 24 | transform: all 900ms; 25 | } 26 | .right button:hover{ 27 | 28 | background:rgb(5, 210, 5); 29 | } 30 | .left textarea{ 31 | width: 100%; 32 | height: 28%; 33 | background: #1f1f1f; 34 | color: white; 35 | padding: 10px 20px; 36 | border: 0; 37 | outline: 0; 38 | font-size: none; 39 | overflow: visible; 40 | } 41 | 42 | .right iframe{ 43 | width: 100%; 44 | height: 80vh; 45 | background: #fff; 46 | border: 0; 47 | outline: 0; 48 | scroll-behavior: smooth; 49 | overflow: visible; 50 | } 51 | 52 | .left label{ 53 | display: flex; 54 | justify-content: center; 55 | background:#000; 56 | height: 30px; 57 | font-size: 1.2rem; 58 | } -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {useState} from "react"; 3 | import "./App.css" 4 | 5 | const App = () => { 6 | const [htmlCode, setHtmlcode] = useState(""); 7 | const [cssCode, setCssCode] = useState(""); 8 | const [jsCode, setJscode] = useState(""); 9 | 10 | const handleOutput = (e) =>{ 11 | const iframe = document.getElementById("output"); 12 | 13 | iframe.contentDocument.body.innerHTML = htmlCode+""; 14 | iframe.contentWindow.eval(jsCode); 15 | } 16 | 17 | return ( 18 |
19 | {/*ide*/} 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | {/*output*/} 30 |
31 | 32 | 33 |
34 | 35 |
36 | ) 37 | } 38 | 39 | export default App -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------