diff --git a/src/static/app.js b/src/static/app.js
new file mode 100644
index 0000000..7f89de3
--- /dev/null
+++ b/src/static/app.js
@@ -0,0 +1,227 @@
+// 全局状态
+let currentTemplateId = null;
+let editor = null;
+let templates = [];
+
+// 初始化
+document.addEventListener('DOMContentLoaded', () => {
+  initEditor();
+  loadTemplates();
+  checkPrinterStatus();
+  bindEvents();
+  setInterval(checkPrinterStatus, 5000);
+});
+
+function initEditor() {
+  editor = CodeMirror.fromTextArea(document.getElementById('yamlEditor'), {
+    mode: 'yaml',
+    theme: 'default',
+    lineNumbers: true,
+    indentUnit: 2,
+    tabSize: 2,
+    lineWrapping: true
+  });
+  editor.on('change', debounce(updatePreview, 500));
+}
+
+function debounce(fn, delay) {
+  let timeout;
+  return (...args) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), delay);
+  };
+}
+
+async function loadTemplates() {
+  try {
+    const res = await fetch('/api/templates');
+    const data = await res.json();
+    if (data.success) {
+      templates = data.templates;
+      renderTemplateList();
+    }
+  } catch (err) {
+    console.error('Failed to load templates:', err);
+  }
+}
+
+function renderTemplateList() {
+  const list = document.getElementById('templateList');
+  list.innerHTML = '';
+  templates.forEach(t => {
+    const li = document.createElement('li');
+    li.textContent = t.name;
+    li.dataset.id = t.id;
+    if (t.id === currentTemplateId) li.classList.add('active');
+    li.addEventListener('click', () => loadTemplate(t.id));
+    list.appendChild(li);
+  });
+}
+
+async function loadTemplate(id) {
+  try {
+    const res = await fetch(`/api/templates/${id}`);
+    const data = await res.json();
+    if (data.success) {
+      currentTemplateId = id;
+      document.getElementById('templateName').value = data.template.name;
+      const yaml = jsyaml.dump(data.template.config || data.template);
+      editor.setValue(yaml);
+      renderTemplateList();
+      updatePreview();
+    }
+  } catch (err) {
+    console.error('Failed to load template:', err);
+  }
+}
+
+function updatePreview() {
+  try {
+    const yaml = editor.getValue();
+    if (!yaml.trim()) {
+      document.getElementById('receiptPreview').innerHTML = '';
+      return;
+    }
+    const config = jsyaml.load(yaml);
+    const testData = getTestData();
+    const html = renderToHTML(config, testData);
+    document.getElementById('receiptPreview').innerHTML = html;
+  } catch (err) {
+    console.log('YAML parse error:', err);
+  }
+}
+
+function renderToHTML(config, data) {
+  if (!config.blocks || !Array.isArray(config.blocks)) {
+    return '<p style="color: #999;">配置无效</p>';
+  }
+  let html = '';
+  for (const block of config.blocks) {
+    html += renderBlockToHTML(block, data);
+  }
+  return html;
+}
+
+function renderBlockToHTML(block, data) {
+  const style = [];
+  if (block.bold) style.push('text-bold');
+  if (block.fontSize === 'small') style.push('text-small');
+  if (block.fontSize === 'large') style.push('text-large');
+  if (block.fontSize === 'xlarge') style.push('text-xlarge');
+  const align = block.align || 'left';
+  style.push(`text-${align}`);
+  
+  switch (block.type) {
+    case 'text': {
+      const content = Mustache.render(block.content, data);
+      return `<div class="${style.join(' ')}">${escapeHtml(content)}</div>`;
+    }
+    case 'divider': {
+      const char = block.char || '-';
+      return `<div class="divider">${char.repeat(48)}</div>`;
+    }
+    case 'row': {
+      const cols = block.columns.map(col => {
+        const content = col.content ? Mustache.render(col.content, data) : '';
+        return `<span>${escapeHtml(content)}</span>`;
+      });
+      return `<div style="display: flex; justify-content: space-between;">${cols.join('')}</div>`;
+    }
+    case 'space': {
+      return '<br>'.repeat(block.lines || 1);
+    }
+    default:
+      return '';
+  }
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function getTestData() {
+  try {
+    const json = document.getElementById('dataEditor').value;
+    return json ? JSON.parse(json) : {};
+  } catch {
+    return {};
+  }
+}
+
+async function checkPrinterStatus() {
+  try {
+    const res = await fetch('/api/printer/status');
+    const data = await res.json();
+    const statusEl = document.getElementById('printerStatus');
+    const dot = statusEl.querySelector('.status-dot');
+    const text = statusEl.querySelector('.status-text');
+    if (data.success && data.printer.online) {
+      dot.className = 'status-dot online';
+      text.textContent = '在线';
+    } else {
+      dot.className = 'status-dot offline';
+      text.textContent = '离线';
+    }
+  } catch {
+    const dot = document.querySelector('.status-dot');
+    const text = document.querySelector('.status-text');
+    if (dot) dot.className = 'status-dot offline';
+    if (text) text.textContent = '离线';
+  }
+}
+
+function bindEvents() {
+  document.getElementById('newTemplate').addEventListener('click', () => {
+    currentTemplateId = null;
+    document.getElementById('templateName').value = '';
+    editor.setValue(`name: "新模板"
+id: "new-template"
+width: 80mm
+blocks:
+  - type: text
+    content: "Hello World"
+    align: center
+`);
+    document.getElementById('receiptPreview').innerHTML = '';
+    renderTemplateList();
+  });
+
+  document.getElementById('saveTemplate').addEventListener('click', async () => {
+    if (!currentTemplateId) {
+      const id = prompt('输入模板 ID（英文、数字、连字符）:');
+      if (!id) return;
+      currentTemplateId = id;
+    }
+    try {
+      const yaml = editor.getValue();
+      const config = jsyaml.load(yaml);
+      const name = document.getElementById('templateName').value || config.name || '未命名';
+      const res = await fetch('/api/templates', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id: currentTemplateId, name, config })
+      });
+      const data = await res.json();
+      if (data.success) {
+        alert('保存成功');
+        loadTemplates();
+      } else {
+        alert('保存失败: ' + data.error.message);
+      }
+    } catch (err) {
+      alert('保存失败: ' + err.message);
+    }
+  });
+
+  document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const tab = e.target.dataset.tab;
+      document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+      e.target.classList.add('active');
+      document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
+      document.getElementById(tab + 'Tab').classList.remove('hidden');
+    });
+  });
+}
diff --git a/src/static/index.html b/src/static/index.html
new file mode 100644
index 0000000..2a88a39
--- /dev/null
+++ b/src/static/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Receipt Printer - 小票打印机配置</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
+</head>
+<body>
+  <div class="app">
+    <header class="header">
+      <h1>🖨️ Receipt Printer</h1>
+      <div class="printer-status" id="printerStatus">
+        <span class="status-dot offline"></span>
+        <span class="status-text">离线</span>
+      </div>
+    </header>
+    
+    <div class="main">
+      <!-- 左侧：模板列表 -->
+      <aside class="sidebar">
+        <div class="sidebar-header">
+          <h2>模板</h2>
+          <button class="btn btn-primary" id="newTemplate">+ 新建</button>
+        </div>
+        <ul class="template-list" id="templateList">
+          <!-- 动态加载 -->
+        </ul>
+      </aside>
+      
+      <!-- 中间：编辑器 -->
+      <div class="editor">
+        <div class="editor-header">
+          <input type="text" id="templateName" placeholder="模板名称" class="template-name">
+          <div class="editor-actions">
+            <button class="btn" id="saveTemplate">保存</button>
+            <button class="btn btn-danger" id="deleteTemplate">删除</button>
+          </div>
+        </div>
+        <div class="editor-body">
+          <textarea id="yamlEditor"></textarea>
+        </div>
+        <div class="editor-toolbar">
+          <span>插入：</span>
+          <button class="btn btn-sm" data-block="text">文本</button>
+          <button class="btn btn-sm" data-block="row">多列</button>
+          <button class="btn btn-sm" data-block="table">表格</button>
+          <button class="btn btn-sm" data-block="list">列表</button>
+          <button class="btn btn-sm" data-block="divider">分隔线</button>
+          <button class="btn btn-sm" data-block="barcode">条码</button>
+          <button class="btn btn-sm" data-block="space">空行</button>
+        </div>
+      </div>
+      
+      <!-- 右侧：预览和数据 -->
+      <aside class="preview-panel">
+        <div class="preview-tabs">
+          <button class="tab-btn active" data-tab="preview">预览</button>
+          <button class="tab-btn" data-tab="data">测试数据</button>
+          <button class="tab-btn" data-tab="schema">Schema</button>
+        </div>
+        
+        <div class="tab-content" id="previewTab">
+          <div class="receipt-preview" id="receiptPreview">
+            <!-- 实时预览 -->
+          </div>
+        </div>
+        
+        <div class="tab-content hidden" id="dataTab">
+          <textarea id="dataEditor" placeholder='{"key": "value"}'></textarea>
+          <button class="btn btn-primary" id="testPrint">打印测试</button>
+        </div>
+        
+        <div class="tab-content hidden" id="schemaTab">
+          <pre id="schemaDisplay"></pre>
+        </div>
+      </aside>
+    </div>
+  </div>
+  
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/yaml/yaml.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.2.0/mustache.min.js"></script>
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/src/static/style.css b/src/static/style.css
new file mode 100644
index 0000000..1cbc72b
--- /dev/null
+++ b/src/static/style.css
@@ -0,0 +1,301 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: #f5f5f5;
+  color: #333;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+/* Header */
+.header {
+  background: #fff;
+  padding: 12px 24px;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header h1 {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.printer-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.status-dot.online { background: #4caf50; }
+.status-dot.offline { background: #f44336; }
+
+/* Main Layout */
+.main {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 220px;
+  background: #fff;
+  border-right: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header {
+  padding: 16px;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebar-header h2 {
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: #666;
+}
+
+.template-list {
+  list-style: none;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.template-list li {
+  padding: 12px 16px;
+  cursor: pointer;
+  border-bottom: 1px solid #f0f0f0;
+  transition: background 0.2s;
+}
+
+.template-list li:hover {
+  background: #f5f5f5;
+}
+
+.template-list li.active {
+  background: #e3f2fd;
+  color: #1976d2;
+}
+
+/* Editor */
+.editor {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.editor-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.template-name {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.editor-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.editor-body {
+  flex: 1;
+  position: relative;
+}
+
+.CodeMirror {
+  height: 100%;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 14px;
+}
+
+.editor-toolbar {
+  padding: 12px 16px;
+  border-top: 1px solid #e0e0e0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.editor-toolbar span {
+  color: #666;
+  font-size: 12px;
+}
+
+/* Preview Panel */
+.preview-panel {
+  width: 360px;
+  background: #fff;
+  border-left: 1px solid #e0e0e0;
+  display: flex;
+  flex-direction: column;
+}
+
+.preview-tabs {
+  display: flex;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.tab-btn {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  font-size: 13px;
+  color: #666;
+  transition: all 0.2s;
+}
+
+.tab-btn:hover {
+  background: #f5f5f5;
+}
+
+.tab-btn.active {
+  color: #1976d2;
+  border-bottom: 2px solid #1976d2;
+}
+
+.tab-content {
+  flex: 1;
+  overflow: auto;
+  padding: 16px;
+}
+
+.tab-content.hidden {
+  display: none;
+}
+
+/* Receipt Preview */
+.receipt-preview {
+  background: #fff;
+  border: 1px solid #ddd;
+  padding: 20px;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 1.6;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.receipt-preview .text-left { text-align: left; }
+.receipt-preview .text-center { text-align: center; }
+.receipt-preview .text-right { text-align: right; }
+.receipt-preview .text-bold { font-weight: bold; }
+.receipt-preview .text-small { font-size: 10px; }
+.receipt-preview .text-large { font-size: 14px; }
+.receipt-preview .text-xlarge { font-size: 18px; }
+.receipt-preview .divider {
+  border-top: 1px dashed #999;
+  margin: 8px 0;
+}
+
+/* Data Editor */
+#dataEditor {
+  width: 100%;
+  height: 300px;
+  padding: 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-family: monospace;
+  font-size: 13px;
+  resize: vertical;
+}
+
+#schemaDisplay {
+  background: #f5f5f5;
+  padding: 16px;
+  border-radius: 4px;
+  font-size: 12px;
+  overflow: auto;
+}
+
+/* Buttons */
+.btn {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s;
+}
+
+.btn:hover {
+  background: #f5f5f5;
+}
+
+.btn-primary {
+  background: #1976d2;
+  color: #fff;
+  border-color: #1976d2;
+}
+
+.btn-primary:hover {
+  background: #1565c0;
+}
+
+.btn-danger {
+  color: #f44336;
+  border-color: #f44336;
+}
+
+.btn-danger:hover {
+  background: #ffebee;
+}
+
+.btn-sm {
+  padding: 4px 12px;
+  font-size: 12px;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}