App Generation Guide

AI App Generation Tips

When using AI tools like ChatGPT, Claude, or other code generators to create HTML apps for HTMLSync, follow these guidelines for best results:

Prompt Structure

Use clear, specific prompts that mention the HTMLSync requirements:

Create a single-file HTML application for [your app idea] that:
- Has all CSS and JavaScript inline (no external files except CDN libraries)
- Uses localStorage for data persistence
- Is fully self-contained in one HTML file
- Includes responsive design

Special prefix & classes

.public-hidden: You can add this class to any element to hide it from public users.
no_sync_: You can add this prefix to any localStorage key to prevent it from being synced with the server. This is useful for things like UI state i.e. theme (dark, light) e.t.c.

Tips

Ask AI to use Tailwind CSS for styling, and Alpine.js for interactivity to get a great starting point.
If you want to use ready-made tools, you can use the template gallery to get started.

Best Practices

HTML Structure

Start with a proper <!DOCTYPE html> declaration
Include viewport meta tag for mobile responsiveness: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Use semantic HTML elements (<main>, <section>, <article>, etc.)

CSS Guidelines

Put all CSS in a <style> tag in the <head> section
Use CSS custom properties (variables) for consistent theming
Implement responsive design with flexbox or grid
Consider dark mode support

<style>
:root {
  --primary-color: #3498db;
  --background-color: #f8f9fa;
  --text-color: #2c3e50;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
}
</style>

JavaScript Best Practices

Put all JavaScript in a <script> tag before the closing </body> tag
Use modern JavaScript (ES6+) features
Implement proper error handling
Add loading states for better UX

localStorage Usage

Always use localStorage for data persistence. HTMLSync automatically syncs this data across devices:

// Save data
localStorage.setItem('myapp_data', JSON.stringify(data));

// Load data
const savedData = JSON.parse(localStorage.getItem('myapp_data') || '[]');

// Clear data
localStorage.removeItem('myapp_data');

Get Started