https://github.com/sidx1024/svelte-to-html

A command to quickly transform a Svelte file into static html.
https://github.com/sidx1024/svelte-to-html

html svelte template transform

Last synced: 6 months ago
JSON representation

A command to quickly transform a Svelte file into static html.

• Host: GitHub
• URL: https://github.com/sidx1024/svelte-to-html
• Owner: sidx1024
• License: mit
• Created: 2022-03-31T12:36:43.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-06-19T14:47:29.000Z (about 3 years ago)
• Last Synced: 2025-08-09T16:53:46.823Z (12 months ago)
• Topics: html, svelte, template, transform
• Language: JavaScript
• Homepage:
• Size: 46.9 KB
• Stars: 13
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Svelte to HTML

- `svelte-to-html` is a command to quickly transform a Svelte file into static html.

- Props can be supplied to the main Svelte file.

- The main Svelte file can import other Svelte components or JavaScript files.

## What this is not?

- This command is not a replacement for SvelteKit. It does not ship any JavaScript nor does it include any head or body tag.

- It obviously does not support any DOM APIs like window, location, navigator etc.

## Why?

- For scenarios where you'd want to generate a static HTML file but with if/else conditionals or for loops. [Svelte's templating features and syntax](https://svelte.dev/docs#template-syntax-if) come to rescue.

- Ideal for creating templates for GitHub comments which can be used in GitHub Actions.

## Usage (CLI)

```sh

npx svelte-to-html   

# Props as json string

npx svelte-to-html filepath.svelte output.html '{"food":"Pizza"}'

# Props as json file

npx svelte-to-html filepath.svelte output.html props.json

```

## Usage (Compiler API)

```js

const { compile } = require('svelte-to-html');

compile('filepath.svelte', { food: 'Pizza' }).then(html => console.log(html));

```

### Example

#### Input

```svelte

  const a = 5;

  const b = 8;

  export let numbers = [];



  {#each numbers as number}

    
{number}

  {/each}



{#if a < b}

  
a is less than b

{:else}

  
b is less than a

{/if}

```


#### Command

```sh

npx svelte-to-html template.svelte template.html '{"numbers": [2, 5, 7]}'

###                               

```

#### Output:

```html



  
2

  
5

  
7



a is less than b

```