add hint text; focus editor on page load
Hunter
Tuesday, July 8th, 2025 at 5:41 PM
1 # HTML Laboratory 🛼
2
3 Craft handmade websites in their natural habitat (your web browser).
-<center><img src="images/pika_construction.gif"></center>
4 +<img src="images/pika_construction.gif">
5
6 ## Usage
7
-1. Open `index.html` in your browser (click <a href="https://hunterirving.github.io/html_laboratory/">here</a>)
8 +1. Open `index.html` in your web browser (or <a href="https://hunterirving.github.io/html_laboratory/">click here</a>)
9 2. Start typing HTML in the editor pane
10 - The preview pane will rerender when you're done typing
11 - Your work is automatically saved and restored when you reload the page
-3. Press `⌘+S` to export your work as an HTML file (`⌘+O` to reopen exported files)
12 +3. Press `⌘ + S` to export your work as an HTML file (`⌘ + O` to reopen exported files)
13
14 ## Technologies Used
15
6 <title>HTML Laboratory</title>
7 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛼</text></svg>">
8 <script type="module">
- import {EditorView, keymap} from "https://esm.sh/@codemirror/view@6"
9 + import {EditorView, keymap, placeholder} from "https://esm.sh/@codemirror/view@6"
10 import {EditorState} from "https://esm.sh/@codemirror/state@6"
11 import {defaultKeymap, indentWithTab} from "https://esm.sh/@codemirror/commands@6"
12 import {html} from "https://esm.sh/@codemirror/lang-html@6"
13 import {githubDark} from "https://esm.sh/@fsegurai/codemirror-theme-github-dark"
14 import {indentUnit} from "https://esm.sh/@codemirror/language@6"
15
- window.CodeMirror = {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit};
16 + window.CodeMirror = {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder};
17 </script>
18 <style>
19 :root {
66 tab-size: 2;
67 }
68
69 + .cm-placeholder {
70 + color: #666;
71 + opacity: 0.6;
72 + }
73 +
74 .cm-content {
75 padding: 15px;
76 font-size: 21px;
216 return;
217 }
218
- const {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit} = window.CodeMirror;
219 + const {EditorView, EditorState, keymap, defaultKeymap, indentWithTab, html, githubDark, indentUnit, placeholder} = window.CodeMirror;
220
221 // Load saved content
222 const savedContent = loadFromStorage();
235 html(),
236 githubDark,
237 indentUnit.of("\t"),
238 + placeholder("Build something with HTML..."),
239 EditorView.updateListener.of((update) => {
240 if (update.docChanged) {
241 clearTimeout(updateTimer);
250
251 // Initial render
252 updatePreview();
253 +
254 + // Focus the editor
255 + editorView.focus();
256 }
257
258 // Initialize when page loads