Uniview

Universal plugin system for React and Solid plugins that render in any host framework

Uniview is a universal plugin system that enables writing plugins in React or Solid that can be rendered by any host framework - Svelte, Vue, React, or custom implementations.

Why Uniview?

Modern applications often need extensibility through plugins. Uniview solves the challenge of:

Framework Lock-in: Write plugins once, render anywhere
Security: Sandboxed execution in Web Workers
Flexibility: Run plugins in browser, Node.js, Deno, or Bun
Type Safety: Full TypeScript support with RPC type checking

                              RPC (kkrpc)
┌───────────────────────┐ ◄──────────────────► ┌──────────────────┐
│  Plugin (React/Solid) │      UINode tree     │  Host (Svelte)   │
│  Web Worker           │                      │  or Vue, React   │
└───────────────────────┘                      └──────────────────┘

Key Features

React & Solid Plugins

Write plugins using React or Solid - hooks, signals, state, components

Any Host Framework

Render in Svelte, Vue, React, or build your own adapter

Sandboxed Execution

Run untrusted plugins safely in Web Workers

Server-Side Plugins

Execute plugins in Node.js/Deno via WebSocket

Terminal UI

Render plugins to terminal without DOM (like React Native)

Native macOS

Render plugins as native SwiftUI or AppKit applications

Quick Example

// App.tsx
import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="p-4">
      <p>Count: {count}</p>
      <button onClick={() => setCount((c) => c + 1)}>Increment</button>
    </div>
  );
}

// App.tsx
import { createSignal } from "solid-js";

const App = () => {
  const [count, setCount] = createSignal(0);

  return (
    <div className="p-4">
      <p>Count: {count()}</p>
      <Button onClick={() => setCount((c) => c + 1)} title="Increment" />
    </div>
  );
};

export default App;

Host (Svelte):

<script lang="ts">
  import { PluginHost } from '@uniview/host-svelte';
  import { createWorkerController } from '@uniview/host-sdk';

  const controller = createWorkerController({
    pluginUrl: '/plugins/my-plugin.js'
  });
</script>

<PluginHost {controller} />

Packages

Package	Description
`@uniview/protocol`	Core types, UINode schema, RPC interfaces
`@uniview/react-renderer`	Custom React reconciler
`@uniview/solid-renderer`	Solid universal renderer
`@uniview/react-runtime`	React plugin bootstrap (Worker/Node.js)
`@uniview/solid-runtime`	Solid plugin bootstrap (Worker/Node.js)
`@uniview/host-sdk`	Framework-agnostic host controller
`@uniview/host-svelte`	Svelte 5 rendering adapter
`@uniview/tui-renderer`	Terminal UI renderer (non-DOM)

Inspiration

Uniview uses custom reconcilers (React and Solid) to serialize component trees into a framework-agnostic UINode format, enabling plugins to render on any host platform.

Get Started

Build your first plugin in 5 minutes

Architecture

Understand how Uniview works