open-index/open-npm huggingface dataset:
npm package: @live-components/image-slider
Description: An HTML Web Component
Author: Erik Isaksen
Latest version: 0.1.0

# &lt;image-slider>
## *A Simple ESM Image Slider Web Component*

- [Developer documentation](docs/develop.md)
<!-- - [Contribution documentation](docs/contribute.md) -->

## Developer Experience

**Image Slider**

* install as an HTML Script Tag
* very small byte size over the wire > `3.1kb`
* optimal content compression > brotli (gzip for nomodule js)
* excellent browser support
  * IE11 (nomodule-only basic css)
  * full support for the last 2 versions of Safari, Edge, Firefox, Mobile Safari, Chrome
* minimal developer tooling
  * `Qunit` (unit testing)
  * `bread-compressor` cli (for gzip and br)
  * SkyPack CDN via NPM (distribution)*
* Indirect SSR Support
  * minimal HTML boilerplate (HTML slots plus wrapper)
  * JS not loaded on server and HTML is identical on server and browser

**(*) Unpkg and AWS S3/Cloudfront (plus some tooling) are other alternative distribution method as well.** 

**Requirements**

- a target application that supports HTML, JS, and CSS

## Terminology
| **term** | **definition** | **resources** |
| --- | --- | --- |
| *Web Component* | A native 1st class browser HTML node built with a combination of Custom Elements, Shadow DOM, and HTML Template tags | [webcomponents.org](https://wwww.webcomponents.org) |
| *Custom Element* | A custom & native 1st Class browser HTML element complete with lifecycyle methods and a constructor | [Using Custom ELements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) |
| *Shadow DOM* | Native encapulation for HTML on a page similar to DOM Fragments or IFrames | |
| *Shadow Root* | The reference container for a given Shadow DOM instance |[Using Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) |
| *Slot* | Transclusion HTML Nodes for Shadow DOM that live in the 'Light' DOM but are slotted into the Shadow DOM | [Slot usage](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot), [Slots and Template Tags](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)  |
| *Custom Properties (AKA CSS Variables)* | scoped CSS values that can pierce through Shadow DOM | [Using Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) |
| *Custom Events* | Events that are developer created and typically pass data to the evt object | [Creating and triggering Custom Events](https://javascript.info/dispatch-events) |
npm package: @live-components/page-header
Description: An HTML Web Component Page Header
Author: Erik Isaksen
Latest version: 1.6.2

# &lt;page-header>
## *A Simple ESM web page header Web Component*

- [Developer documentation](docs/develop.md)
- [Contribution documentation](docs/contribute.md)

## Developer Experience

**Page Header**

* install as an HTML Script Tag
* only a single runtime dependency > `<img-icon>` (svg icon component)
* very small byte size over the wire > `16.5kb`
* optimal content compression > brotli (gzip for nomodule js) |
* excellent browser support
  * IE11 (nomodule-only basic css/initial login)
  * full support for the last 2 versions of Safari, Edge, Firefox, Mobile Safari, Chrome
* minimal developer tooling
  * `Qunit` (unit testing)
  * `bread-compressor` cli (for gzip and br)
  * SkyPack CDN via NPM (distribution)*
* SSR Support
  * minimal HTML boilerplate (HTML slots plus wrapper)
  * JS not loaded on server and HTML is identical on server and browser

**(*) Unpkg and AWS S3/Cloudfront (plus some tooling) are other alternative distribution method as well.** 

**Requirements**

- a target application that supports HTML, JS, and CSS

## Terminology
| **term** | **definition** | **resources** |
| --- | --- | --- |
| *Web Component* | A native 1st class browser HTML node built with a combination of Custom Elements, Shadow DOM, and HTML Template tags | [webcomponents.org](https://wwww.webcomponents.org) |
| *Custom Element* | A custom & native 1st Class browser HTML element complete with lifecycyle methods and a constructor | [Using Custom ELements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) |
| *Shadow DOM* | Native encapulation for HTML on a page similar to DOM Fragments or IFrames | |
| *Shadow Root* | The reference container for a given Shadow DOM instance |[Using Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) |
| *Slot* | Transclusion HTML Nodes for Shadow DOM that live in the 'Light' DOM but are slotted into the Shadow DOM | [Slot usage](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot), [Slots and Template Tags](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots)  |
| *Custom Properties (AKA CSS Variables)* | scoped CSS values that can pierce through Shadow DOM | [Using Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) |
| *Custom Events* | Events that are developer created and typically pass data to the evt object | [Creating and triggering Custom Events](https://javascript.info/dispatch-events) |
npm package: @live-compositor/node
Description: Provides API to create and manage LiveCompositor instances for Node.js environment.
Latest version: 0.1.0

# `@live-compositor/node`

Provides API to create and manage LiveCompositor instances for Node.js environment.

When you call `registerOutput` on the LiveCompositor instance, you can pass a `ReactElement` that represents a component tree built from components included in `live-compositor` package. Those components will define what will be rendered on the output stream.

## Usage

```tsx
import LiveCompositor from '@live-compositor/node';
import { View, Text } from 'live-compositor';

function ExampleApp() {
  return (
    <View>
      <Text fontSize={20}>Hello world</Text>
    </View>
  );
}

async function run() {
  const compositor = new LiveCompositor();
  await compositor.init()

  // register input/outputs/images/shaders/...

  await compositor.registerOutput('example_output', {
    type: 'rtp_stream',
    port: 8001,
    ip: '127.0.0.1',
    transportProtocol: 'udp',
    video: {
      encoder: { type: 'ffmpeg_h264', preset: 'ultrafast' },
      resolution: { width: 1920, height: 1080 },
      root: <ExampleApp />,
    },
    audio: {
      encoder: {
        type: 'opus',
        channels: 'stereo',
      },
    }
  });

  await compositor.start();
}
run();
```

See our [docs](https://compositor.live/docs) to learn more.

## License

`@live-compositor/node` is MIT licensed, but internally it is downloading and using Live Compositor server that is licensed
under [Business Source License 1.1](https://github.com/software-mansion/live-compositor/blob/master/LICENSE).

## LiveCompositor is created by Software Mansion

[![swm](https://logo.swmansion.com/logo?color=white&variant=desktop&width=150&tag=live-compositor-github 'Software Mansion')](https://swmansion.com)

Since 2012 [Software Mansion](https://swmansion.com) is a software agency with experience in building web and mobile apps as well as complex multimedia solutions. We are Core React Native Contributors and experts in live streaming and broadcasting technologies. We can help you build your next dream product – [Hire us](https://swmansion.com/contact/projects?utm_source=live-compositor&utm_medium=readme).
npm package: @live-demo/rspress
Description: Rspress plugin for interactive code examples.
Latest version: 2.0.6

# Live Demo - Interactive Examples for Rspress

![demo](https://github.com/user-attachments/assets/70744765-a147-41bf-96d8-93f30aded8fb)

## Quick start

### Install

```sh
// Rspress v2
npm install @live-demo/rspress

// Rspress v1
npm install @live-demo/rspress@1
```

### Register

```ts
// Rspress v1
import { defineConfig } from "rspress/config";
// Rspress v2
import { defineConfig } from "@rspress/core";

import { liveDemoPluginRspress } from "@live-demo/rspress";

export default defineConfig({
	plugins: [liveDemoPluginRspress()],
});
```

### Use

Now you can use it in your MDX files in either of the two ways:

1. As an **"external"** interactive example (snippet in a dedicated file):

```tsx
<code src="../snippets/MyDemo.tsx" />
```

2. As an **"inline"** interactive example:
````tsx
```jsx live
export const App = () => {
  return <div>Hello World</div>;
};
```
````


## Docs

Usage, examples, API: https://live-demo.pages.dev/guide/getStarted

## Motivation
This is a fork of [@rspress/plugin-playground](https://rspress.dev/plugin/official-plugins/playground), which adds some important features.

### Features:
- Multi-file support
- Typescript support

### Plus, some niceties:
- toggle code wrap
- resizable panels
- switch between split view/editor/preview
- fullscreen view
- etc.
npm package: @live-html-editor/browser
Description: An ideal html-editor for development purposes. It has a NEAT output + capability to save directly from browser into your sources
Author: S. M. Mir-Ismaili
Latest version: 0.2.0

<p dir="auto">
	<a href="https://github.com/live-html-editor/browser">
			<img src="https://badge.fury.io/gh/live-html-editor%2Fbrowser.svg" alt="GitHub version">
	</a>
	<a href="https://npmjs.com/package/@live-html-editor/browser">
		<img alt="npm (scoped)" src="https://img.shields.io/npm/v/@live-html-editor/browser.svg">
	</a>
	<a href="https://npmjs.com/package/@live-html-editor/browser">
		<img alt="npm" src="https://img.shields.io/npm/dt/@live-html-editor/browser.svg">
	</a>
	<a href="https://david-dm.org/live-html-editor/browser">
		<img src="https://david-dm.org/live-html-editor/browser.svg" alt="Dependency Status">
	</a>
	<a href="https://david-dm.org/live-html-editor/browser?type=dev">
		<img src="https://david-dm.org/live-html-editor/browser/dev-status.svg" alt="devDependency Status">
	</a>
	<a href="https://packagephobia.now.sh/result?p=@live-html-editor/browser">
		<img src="https://packagephobia.now.sh/badge?p=@live-html-editor/browser" alt="install size">
	</a>
	<br>
	<a href="https://github.com/live-html-editor/browser/blob/master/LICENSE">
		<img alt="GitHub" src="https://img.shields.io/github/license/live-html-editor/browser.svg">
	</a>
	<br>
	<a href="https://github.com/live-html-editor/browser/fork">
		<img src="https://img.shields.io/github/forks/live-html-editor/browser.svg?style=social" alt="GitHub forks">
	</a>
	<a href="https://github.com/live-html-editor/browser">
		<img src="https://img.shields.io/github/stars/live-html-editor/browser.svg?style=social" alt="GitHub stars">
	</a>
</p>

<h1 dir="auto">
	Live-Html-Editor
</h1>

<p dir="auto">
	<b><i>Ideal</i></b> for development purposes ... It has a <i><b>neat output</b> + capability to save in your
	sources (from browser)</i>
</p>
npm package: @live-html-editor/text-wrap
Description: A utility to wrap (break) long lines of large texts into limited-length lines, based on given options
Author: S. M. Mir-Ismaili
Latest version: 0.7.0
Deprecated: Moved to text-wrapper (https://www.npmjs.com/package/text-wrapper)

<p dir="auto">
	<a href="https://npmjs.com/package/@live-html-editor/text-wrap">
		<img alt="npm (scoped)" src="https://img.shields.io/npm/v/@live-html-editor/text-wrap.svg">
	</a>
	<a href="https://npmjs.com/package/@live-html-editor/text-wrap">
		<img alt="npm" src="https://img.shields.io/npm/dt/@live-html-editor/text-wrap.svg">
	</a>
	<a href="https://packagephobia.now.sh/result?p=@live-html-editor/text-wrap">
		<img src="https://packagephobia.now.sh/badge?p=@live-html-editor/text-wrap" alt="install size">
	</a>
	<br>
	<a href="https://travis-ci.com/live-html-editor/TextWrap">
			<img src="https://travis-ci.com/live-html-editor/TextWrap.svg?branch=master" alt="Build Status">
	</a>
	<a href="https://codecov.io/github/live-html-editor/TextWrap">
		<img src="https://codecov.io/github/live-html-editor/TextWrap/branch/master/graph/badge.svg" alt="codecov">
	</a>
	<a href="https://david-dm.org/live-html-editor/textwrap">
		<img src="https://david-dm.org/live-html-editor/textwrap.svg" alt="Dependency Status">
	</a>
	<a href="https://david-dm.org/live-html-editor/textwrap?type=dev">
		<img src="https://david-dm.org/live-html-editor/textwrap/dev-status.svg" alt="devDependency Status">
	</a>
	<br>
	<a href="http://commitizen.github.io/cz-cli/">
		<img alt="Commitizen friendly" src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg">
	</a>
	<a href="https://github.com/live-html-editor/TextWrap/fork">
		<img src="https://img.shields.io/github/forks/live-html-editor/TextWrap.svg?style=social" alt="GitHub forks">
	</a>
	<a href="https://github.com/live-html-editor/TextWrap">
		<img src="https://img.shields.io/github/stars/live-html-editor/TextWrap.svg?style=social" alt="GitHub stars">
	</a>
	<br>
	<a href="https://github.com/live-html-editor/TextWrap/blob/master/LICENSE">
		<img alt="GitHub" src="https://img.shields.io/github/license/live-html-editor/TextWrap.svg">
	</a>
</p>

<h1 dir="auto">
	Text-Wrap
</h1>

<p dir="auto">
	<b><i>A utility to wrap (break) long lines of large texts into limited-length lines, based on given options</i></b><br>
</p>