https://github.com/patrickg/html-svelte-parser

HTML to Svelte parser.
https://github.com/patrickg/html-svelte-parser

dom html html-svelte-parser html-to-svelte parser svelte svelte-parser sveltekit

Last synced: 6 days ago
JSON representation

HTML to Svelte parser.

• Host: GitHub
• URL: https://github.com/patrickg/html-svelte-parser
• Owner: PatrickG
• License: agpl-3.0
• Created: 2022-11-30T14:00:07.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2024-01-11T10:11:52.000Z (10 months ago)
• Last Synced: 2024-10-13T10:54:00.003Z (25 days ago)
• Topics: dom, html, html-svelte-parser, html-to-svelte, parser, svelte, svelte-parser, sveltekit
• Language: TypeScript
• Homepage:
• Size: 195 KB
• Stars: 16
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
#  html-svelte-parser

HTML to Svelte parser that works on both the server (Node.js) and the client (browser).

To replace an element with a svelte component, check out the [`processNode`](#processnode) option.

#### Example

_Paragraph.svelte_

```svelte



```


_App.svelte_

```svelte

	import { Html, isTag } from 'html-svelte-parser';

	import Paragraph from './Paragraph.svelte';

 {

		if (isTag(node) && node.name === 'p') {

			return { component: Paragraph };

		}

	}}

/>

```

---

Table of Contents

- [Install](#install)

- [Usage](#usage)

  - [processNode](#processnode)

    - [Modify/remove nodes](#modifyremove-nodes)

    - [Replace nodes](#replace-nodes)

  - [Usage with sveltekit](#usage-with-sveltekit)

  - [Named slots](#named-slots)

- [Credits](#credits)

## Install

Install the [NPM package _html-svelte-parser_](https://www.npmjs.com/package/html-svelte-parser) with your favorite package manager:

```sh

npm install html-svelte-parser

# pnpm add html-svelte-parser

# yarn add html-svelte-parser

```

## Usage

```svelte

	import { Html } from 'html-svelte-parser';