Using Templates

• What are Templates?
• Creating from Tools
• Customizing Templates

What are Templates?

Templates are pre-built HTML applications that serve as starting points for your own apps. They provide working examples of common functionality and can save you time when building new applications.

Creating from Tools (also saves localStorage data)

When logged in to your HTMLSync account:

1. Log in to your HTMLSync account

2. Visit the Template Gallery

3. Click on the template you want to use

4. Open the template by clicking the "Use free in Browser" button

   
   

   

   
   

5. Click the notification in the screenshot below to create a new app and save the localStorage data to the server

   
   

   

   
   

Method 2: From Dashboard (Anyone)

You can try templates without an account:

1. Go to the Templates page
2. Find your tool and click "+ Create App"

3. An app will be created and you will be redirected to the edit page

   
   

   

   
   

Customizing Templates

Basic Customizations

Most templates can be easily customized by modifying:

Colors and Styling

<style>
:root {
  /* Change these CSS variables */
  --primary-color: #3498db;      /* Main theme color */
  --secondary-color: #2ecc71;    /* Accent color */
  --background-color: #f8f9fa;   /* Background */
  --text-color: #2c3e50;         /* Text color */
}
</style>

App Title and Branding

<title>Your App Name</title>
<!-- And in the body -->
<h1>Your App Name</h1>

localStorage Keys

// Change the storage key to avoid conflicts
const STORAGE_KEY = 'your_app_name_data';

Advanced Customizations

For advanced customizations, you can modify the template code directly or provide it as an attachment to AI, and ask it to modify the code.