02 Get Started (Step-by-Step)

# Get Started with Hyperclay Build your first self-modifying HTML app in minutes. ## What You'll Build In this guide, you'll create a simple task list that: - Saves automatically when you make changes - Has different views for visitors and admins - Persists data without any database setup - Works as a single, portable HTML file ## 1. Create Your App ![[get-started-1.png]] 1. Go to [hyperclay.com](https://hyperclay.com) 2. Choose a name for your HTML App (e.g., "my-tasks") 3. Click "Create Site" ## 2. Add Your First HTML ![[get-started-2.png]] 1. Click "Edit Code" in your app's menu 2. Replace the default HTML with this starter template: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Task List</title> <script src="https://hyperclay.com/js/hyperclay-starter-kit.js" type="module"></script> <style> body { font-family: system-ui; max-width: 600px; margin: 40px auto; padding: 20px; } .task { padding: 10px; margin: 10px 0; background: #f5f5f5; border-radius: 5px; } </style> </head> <body> <h1 edit-mode-contenteditable>My Task List</h1>  <div class="tasks">  <div class="task" style="display: none" onclone="this.style.display = ''"> <input type="checkbox" persist> <span edit-mode-contenteditable>New Task</span> <button option:editmode="true" onclick="this.nearest.task.remove()">Delete</button> </div>  <div class="task"> <input type="checkbox" persist> <span edit-mode-contenteditable>Learn Hyperclay</span> <button option:editmode="true" onclick="this.nearest.task.remove()">Delete</button> </div> </div> <button option:editmode="true" onclick="this.nearest.tasks.append(this.nearest.task.cloneNode(true))">Add Task</button> </body> </html> ``` 3. Click "Save" or press Cmd/Ctrl+S ## 3. Understanding the Magic ![[get-started-3.png]] Let's break down what makes this Hyperclay app special: ### The Hyperclay Starter Kit ```html <script src="https://hyperclay.com/js/hyperclay-starter-kit.js" type="module"></script> ``` This single line enables: - **Auto-save**: Changes to the DOM are automatically saved - **Edit/View modes**: Loads an admin-only view on top of the visitors' view - **DOM persistence**: Form values and content changes can be easily preserved ### Key Attributes **`option:editmode="true"`** - Shows elements only in edit mode: ```html <div option:editmode="true">Only admins see this</div> ``` **`persist`** - Makes form values save to the DOM: ```html <input type="checkbox" persist> ``` **`edit-mode-contenteditable`** - Makes text editable for admins only: ```html <span edit-mode-contenteditable>Click to edit (admins only)</span> ``` ### The Save Lifecycle 1. **You make a change** (check a box, edit text, add an element) 2. **Hyperclay detects the change** via mutation observers 3. **Before saving**, admin-only elements are stripped out 4. **The clean HTML is saved** to the server 5. **When loading**, admin elements are re-injected if you're the owner ## 4. Try Your Live App ![[get-started-4.png]] 1. Visit `https://your-app-name.hyperclay.com` 2. As the owner, you'll see: - Admin controls panel - Editable task text - Delete buttons - Everything saves automatically! 3. Try these actions: - Check some boxes - they stay checked after refresh - Click on task text to edit it inline - Add new tasks with the button - Toggle edit mode to see the visitor view 4. Open in an incognito window to see the clean, read-only visitor view ## 5. What's Next? ### Quick Experiments Try adding these features to understand Hyperclay better: **Element that cleans itself up before saving:** ```html <div class="temp" onbeforesave="this.remove()"> This element disappears on save </div> ``` **Sortable tasks:** ```html <div id="tasks" sortable="tasks">  </div> ``` ### Key Concepts to Explore - **DOM as Database**: Your HTML is your data storage - **Self-Modifying Documents**: The page can change itself - **Progressive Enhancement**: Start simple, add features as needed - **Single File Philosophy**: Everything in one portable HTML file