East UI Preview

Live preview of East UI components in VSCode

East UI Preview is a VSCode extension that provides live preview of East UI components. Edit TypeScript files containing East function definitions and see the rendered UI update in real-time.

Features

• Live Preview - Visualize East UI components without running a full application
• Watch Mode - Edit TypeScript code and see changes instantly
• Full IntelliSense - Leverage VSCode's TypeScript support while previewing
• Multiple Formats - Supports TypeScript source files and pre-compiled IR

Supported File Types

Usage

1. Open a supported file (.ts, .beast, .east, or .json)
2. Right-click the file in the Explorer and select "East UI: Open Preview"
3. Or use the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and search for "East UI: Open Preview"

The preview panel opens beside your editor. For TypeScript files, changes are automatically detected and the preview updates.

TypeScript File Convention

For .ts files, export a default East function that returns UIComponentType:

/**
 * Typography Example
 * Open this file with the East UI Preview extension to see the rendered output.
 */
import { East } from "@elaraai/east";
import { UIComponentType, Text, Stack } from "@elaraai/east-ui";

export default East.function([], UIComponentType, () => {
    return Stack.Root([
        Text.Root("Hello World"),
        Text.Root("Bold Text", { fontWeight: "bold" }),
        Text.Root("Styled Text", {
            color: "white",
            background: "teal.500",
            fontSize: "lg",
        }),
    ], { gap: "4", direction: "column" });
});

See packages/east-ui/examples/ for more complete examples.

Requirements

• VSCode 1.85.0 or higher
• Node.js 22.0.0 or higher

Ecosystem

• East: Statically typed, expression-based language with serializable IR. Run portable logic across TypeScript, Python, C, and other runtimes.

  • @elaraai/east: Core language SDK with type system, expressions, and reference JS compiler

• East Node: Node.js platform functions for I/O, databases, and system operations.

  • @elaraai/east-node-std: Console, FileSystem, Fetch, Crypto, Time, Path, Random
  • @elaraai/east-node-io: SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, compression
  • @elaraai/east-node-cli: CLI for running East IR programs in Node.js

• East C: C11 native runtime for executing East IR. Tarballed for linux-x64 and linux-arm64, attached to each GitHub Release.

  • east-c: Core runtime — type system, IR interpreter, 200+ builtins, serialization (Beast2, JSON, CSV, East text)
  • east-c-std: Console, FileSystem, Fetch, Crypto, Time, Path, Random
  • east-c-cli: CLI for running East IR programs natively

• East Python: Python runtime, standard platform, I/O, and data-science platform functions. Published to PyPI.

  • east-py: Core Python runtime — type system, IR compiler, 212+ builtins, Cython-accelerated hot paths
  • east-py-std: Console, FileSystem, Fetch, Crypto, Time, Path, Random
  • east-py-io: SQLite, PostgreSQL, MySQL, MongoDB, Redis, S3, FTP, SFTP, XLSX, XML, compression
  • east-py-cli: CLI for running East IR programs in Python
  • east-py-datascience (PyPI) + @elaraai/east-py-datascience (npm): Optimization (MADS, Optuna, ALNS, GoogleOR), ML (XGBoost, LightGBM, NGBoost, PyTorch, Lightning, GP), Bayesian inference (PyMC), explainability (SHAP), conformal prediction (MAPIE)

• East UI: Typed UI component definitions and React renderer, plus VS Code preview.

  • @elaraai/east-ui: 50+ typed UI components for layouts, forms, charts, tables, dialogs
  • @elaraai/east-ui-components: React renderer with Chakra UI v3 styling
  • @elaraai/e3-ui: e3 + UI bridge — Data bindings, e3.ui() task, manifest
  • @elaraai/e3-ui-components: React Query hooks and preview components for the e3 API
  • east-ui-preview: VS Code extension for live East UI component preview

• e3 — East Execution Engine: Durable execution engine for running East pipelines at scale. Git-like content-addressable storage, automatic memoization, reactive dataflow, real-time monitoring.

  • @elaraai/e3: SDK for authoring e3 packages with typed tasks and pipelines
  • @elaraai/e3-core: Object store, dataflow orchestrator, execution state
  • @elaraai/e3-types: Shared type definitions for e3 packages
  • @elaraai/e3-cli: e3 repo, e3 package, e3 workspace, e3 start, e3 watch, e3 logs commands
  • @elaraai/e3-api-client: HTTP client for remote e3 repositories
  • @elaraai/e3-api-server: REST API server for e3 repositories
  • @elaraai/e3-api-tests: Shared API compliance test suites

Links

• Live Showcase: https://elaraai.github.io/east-ui/
• East UI: https://www.npmjs.com/package/@elaraai/east-ui
• Documentation: https://github.com/elaraai/east-workspace/tree/main/libs/east-ui
• Issues: https://github.com/elaraai/east-workspace/issues

About Elara

East is developed by Elara AI Pty Ltd, an AI-powered platform that creates economic digital twins of businesses that optimize performance. Elara combines business objectives, decisions and data to help organizations make data-driven decisions across operations, purchasing, sales and customer engagement, and project and investment planning. East powers the computational layer of Elara solutions, enabling the expression of complex business logic and data in a simple, type-safe and portable language.

Developed by Elara AI Pty Ltd.

Claude Code plugin

The East ecosystem also ships a Claude Code plugin — East language skills, example search, and preemptive diagnostics for East code — installed separately from the elaraai marketplace:

# Inside Claude Code
/plugin marketplace add elaraai/east-workspace
/plugin install east@elaraai

# From a terminal
claude plugin marketplace add elaraai/east-workspace
claude plugin install east@elaraai

License

Dual-licensed:

• Open Source: AGPL-3.0 - Free for open source use
• Commercial: Available for proprietary use - contact support@elara.ai

Developed by Elara AI Pty Ltd