https://github.com/anindosarker/handlebarjs-live-editor

Edit Handlebars templates and see the changes live in the browser.
https://github.com/anindosarker/handlebarjs-live-editor

email-template handlebars handlebars-helpers handlebars-js handlebars-template handlebarsjs vite

Last synced: about 2 months ago
JSON representation

Edit Handlebars templates and see the changes live in the browser.

• Host: GitHub
• URL: https://github.com/anindosarker/handlebarjs-live-editor
• Owner: anindosarker
• Created: 2024-11-04T20:45:16.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2024-11-04T21:04:53.000Z (3 months ago)
• Last Synced: 2024-11-12T00:53:10.235Z (3 months ago)
• Topics: email-template, handlebars, handlebars-helpers, handlebars-js, handlebars-template, handlebarsjs, vite
• Language: TypeScript
• Homepage:
• Size: 1.07 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Handlebars.js Live Editor

This project is a Handlebars.js live editor to test out compiled templates with hot reload. It allows you to edit Handlebars templates and see the changes live in the browser.

![Live Demo](public/example.png)

## Steps to Get Started

1. **Install Dependencies**:

   ```sh

   npm install

   ```

2. **Run the Development Server**:

   ```sh

   npm run dev

   ```

3. **Open the Live Editor**:

   Open your browser and navigate to [http://localhost:5173/](http://localhost:5173/).

4. **Edit the Template**:

   Edit the template live on `src/templates/template.hbs`. Any changes you make will be reflected in the browser immediately.

5. **Style Modifications**:

   - Modify the styles by editing `src/templates/template-style.css`.

   - Alternatively, you can use inline CSS within the `template.hbs` file to modify the styles directly.

## Example Template (`src/templates/template.hbs`)

```handlebars

  

    

    

    

    {{title}}

    

  

  

    


      
{{title}}

      
{{description}}

    

    


      {{#each items}}

        
{{this.name}}: ${{this.price}}

      {{/each}}

    

  


```

## Example Styles (`src/templates/template-style.css`)

```css

body {

  font-family: Arial, sans-serif;

  background-color: #f0f0f0;

  margin: 0;

  padding: 20px;

}

h1 {

  color: #333;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  background-color: #fff;

  margin: 5px 0;

  padding: 10px;

  border: 1px solid #ddd;

}

```

Enjoy editing your Handlebars templates with live reload!