[{"id":"9de15038-83dd-4d25-ba32-e87ba9836e23","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"HTML is ","styles":{}},{"type":"text","text":"not a programming language","styles":{"bold":true}},{"type":"text","text":". ","styles":{}}],"children":[]},{"id":"091abb2e-c351-4650-bd49-115bba0dbce8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It is a ","styles":{}},{"type":"text","text":"markup language","styles":{"bold":true}},{"type":"text","text":", which means it structures content using tags.","styles":{}}],"children":[]},{"id":"dcb81495-12f6-4f41-9400-c083566d3536","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"51a91baf-8c09-4581-b819-aa3a18d7680d","type":"image","props":{"textAlignment":"left","backgroundColor":"default","name":"","url":"https://yugwdlxrtovparrbfxgp.supabase.co/storage/v1/object/public/media/e3e0742a-7815-48f2-9687-5e820a5523e7/0.2542878577910924.png","caption":"","showPreview":true,"previewWidth":366},"children":[]},{"id":"fa6a758a-cfd1-46a2-a16a-d335f7bf891b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"2f996151-e201-4864-bd87-a0be3239238d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML5 boilerplate","styles":{"bold":true}},{"type":"text","text":" with proper structure and closing tags:ss","styles":{}}],"children":[]},{"id":"b7b91307-cba3-43cc-893f-e9ec32caa857","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"/","styles":{}}],"children":[]},{"id":"b85f44f4-adde-4bcc-a83e-379c93eea966","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"body {\\n font-family: system-ui;\\n padding: 20px;\\n background-color: #f8fafc;\\n color: #1e293b;\\n}\\n\\nh1 {\\n color: #0f172a;\\n}\",\"language\":\"css\"},{\"id\":\"/tsconfig.json\",\"name\":\"tsconfig.json\",\"code\":\"{\\n \\\"compilerOptions\\\": {\\n \\\"strict\\\": true,\\n \\\"module\\\": \\\"commonjs\\\",\\n \\\"jsx\\\": \\\"preserve\\\",\\n \\\"esModuleInterop\\\": true,\\n \\\"sourceMap\\\": true,\\n \\\"allowJs\\\": true,\\n \\\"lib\\\": [\\n \\\"es6\\\",\\n \\\"dom\\\"\\n ],\\n \\\"rootDir\\\": \\\"src\\\",\\n \\\"moduleResolution\\\": \\\"node\\\"\\n }\\n}\",\"language\":\"json\"},{\"id\":\"/index.ts\",\"name\":\"index.ts\",\"code\":\"import \\\"./styles.css\\\";\\n\\nconst app = document.getElementById(\\\"app\\\");\\n\\napp!.innerHTML = `\\n`;\",\"language\":\"typescript\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n\\n Vanilla\\n \\n\\n\\n \\n

\\n\\n \\n

\\n

Vanilla

\\n

\\n\\n

\\n

Edit index.html or styles.css to get started.

\\n

\\n\\n \\n \\n \\n\\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"devDependencies\\\": {\\n \\\"typescript\\\": \\\"^4.0.0\\\"\\n },\\n \\\"main\\\": \\\"/index.ts\\\"\\n}\",\"language\":\"json\"}]","template":"vanilla-ts"},"children":[]},{"id":"0ea4f247-3e9a-4042-821e-22d7a3ff7abd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"0ea4f247-3e9a-4042-821e-22d7a3ff7abd","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"37ded000-d9fb-4590-b6ff-3b6bd47c1c0f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]

Root

Html Starter

Root

Html Starter