https://github.com/jacoblincool/xml-svelte

This is a Svelte component for rich editing / viewing XML in the browser.
https://github.com/jacoblincool/xml-svelte

Last synced: 12 months ago
JSON representation

This is a Svelte component for rich editing / viewing XML in the browser.

• Host: GitHub
• URL: https://github.com/jacoblincool/xml-svelte
• Owner: JacobLinCool
• License: mit
• Created: 2023-07-17T17:52:46.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2025-06-28T16:16:18.000Z (12 months ago)
• Last Synced: 2025-06-28T17:27:22.018Z (12 months ago)
• Language: Svelte
• Homepage: https://xml-svelte.pages.dev
• Size: 127 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# XML Svelte

This is a Svelte component for editing / viewing XML in the browser.

## Features

- Headless, works with any CSS framework (e.g. Bootstrap, Tailwind, etc.)

- Lazy loading, fetches tag components on demand

## Example

See [src/routes/+page.svelte](src/routes/+page.svelte) for an example of how to use the component to view and edit SSML (Speech Synthesis Markup Language, an XML dialect).

![example](./images/example.png)

```svelte

    import { XML } from 'xml-svelte';

    let xml = '<speak> ... </speak>';

    let result = xml;

    const render = {

        speak: () => import('$lib/ssml/speak.svelte'),

        emphasis: () => import('$lib/ssml/emphasis.svelte'),

        prosody: () => import('$lib/ssml/prosody.svelte'),

        break: () => import('$lib/ssml/break.svelte'),

        '#text': () => import('$lib/ssml/content.svelte')

    };

    let editor: XML;

    function update() {

        const out = editor.result();

        if (out) {

            result = out;

        } else {

            result = 'Invalid XML';

        }

    }



    

    
{result}



```