pug-to-svelte

1.1.0 verified Fri May 01 auth: no javascript

Pug-to-Svelte transpiler (v1.1.0, stable, complete). Converts Pug templates to HTML while preserving Svelte logic, expressions, and control structures. Designed as a Svelte preprocessor. Key limitations: tabs-only indentation, no tag splitting across lines, no prop shorthands, no spread props, no style props. Production-ready and actively maintained but feature-complete. Faster and lighter than generic template transpilers, with zero artificial syntax.

Common errors

error Error: Unexpected token 'div' at ... ↓

cause Using spaces for indentation instead of tabs.

fix

Replace spaces with tabs for indentation in your .svelte files using Pug syntax.

error Error: Expected newline or indentation but got something else at line X ↓

cause A tag is split across multiple lines.

fix

Put the entire tag (including attributes) on a single line.

error TypeError: pugToSvelte is not a function ↓

cause Using named import instead of default import.

fix

Use import pugToSvelte from 'pug-to-svelte' or const pugToSvelte = require('pug-to-svelte').

Warnings

gotcha Indentation must use tabs only. Spaces as indentation will cause parse errors. ↓

fix Convert indentation to tabs. Most editors have a 'Convert Indentation to Tabs' option.

gotcha Tags cannot be split across multiple lines. Each tag must be on a single line. ↓

fix Ensure each tag (including attributes) is on one line.

gotcha Prop shorthands (e.g., `{value}` instead of `value={value}`) are NOT supported. Svelte-style shorthands like `{value}` will not work. ↓

fix Always explicitly write both prop name and value: `value={value}`.

gotcha Spread props (e.g., `{...obj}`) are NOT supported. ↓

fix Expand props manually or use a wrapper component.

gotcha Style props (like `style:color`) are NOT supported. ↓

fix Use inline styles via the `style` attribute as an object string.

deprecated This package is feature-complete and no further development is planned. ↓

fix No action needed, but evaluate if other transpilers (like svelte-preprocess with pug) suit your needs.

Install

npm install pug-to-svelte

yarn add pug-to-svelte

pnpm add pug-to-svelte

Imports

default export
wrong
```
import { pugToSvelte } from 'pug-to-svelte'
```
correct
```
import pugToSvelte from 'pug-to-svelte'
```
Package exports a single function as default export. Named import will fail.

require

wrong

const pugToSvelte = require('pug-to-svelte').default

correct

const pugToSvelte = require('pug-to-svelte')

CommonJS require works directly, no .default needed.

TypeScript types
wrong
```
import pugToSvelte = require('pug-to-svelte')
```
correct
```
import pugToSvelte from 'pug-to-svelte'
```
Package ships TypeScript declarations. Use ESM import for proper type inference. For CJS, use const pugToSvelte: any = require('pug-to-svelte').

Quickstart

Transpile a simple Pug template to Svelte HTML, including error handling and integration with Svelte preprocessors.

import pugToSvelte from 'pug-to-svelte';

const pugCode = `
script.
  let count = 0

button(on:click={() => count++}) Clicked {count} times
`;

try {
  const htmlResult = pugToSvelte(pugCode);
  console.log(htmlResult); // Output: Svelte component with HTML
} catch (error) {
  console.error('Transpilation failed:', error);
}

// Use with Svelte preprocessor:
import { preprocess } from 'svelte/compiler';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

const preprocessed = await preprocess(
  pugCode,
  vitePreprocess(),
  { filename: 'Component.svelte' }
);
console.log(preprocessed.code);