https://github.com/hunchcloud/live-element

A custom element to live edit other custom elements
https://github.com/hunchcloud/live-element

custom-element live-editing playground web-components

Last synced: about 1 month ago
JSON representation

A custom element to live edit other custom elements

• Host: GitHub
• URL: https://github.com/hunchcloud/live-element
• Owner: hunchcloud
• License: bsd-3-clause
• Created: 2020-02-24T07:02:29.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-03T08:18:51.000Z (almost 5 years ago)
• Last Synced: 2024-11-17T02:18:20.678Z (about 1 month ago)
• Topics: custom-element, live-editing, playground, web-components
• Language: TypeScript
• Homepage: https://live-element.glitch.me
• Size: 336 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ``

[![npm](https://img.shields.io/npm/v/@hunchcloud/live-element.svg)](https://www.npmjs.com/package/@hunchcloud/live-element)

A custom element to live edit other custom elements. Like react-live, but for web components (custom elements).

💫️ [Demos](https://live-element.glitch.me/)

![demo.gif](demo.gif)

## Usage

Install by

```

yarn add @hunchcloud/live-element

```

Insert the following HTML

```html

  

    

  

```

Then you will get a playground to live edit ``.

Notice the `` wrapper is required to prevent `` rendering before being passed to ``.

## Customize editor styles

Use `style-template-id` to pass in customized styles.

```html

  

  

    #live-editor {

      color: #657b83;

      background: #073642;

    }

    ::slotted(*) {

      background: lightcyan;

    }

  

  

    

  

```

## Development

```

yarn start

```