DOCSEARCHbyAlgolia
Submit Docs

Unit Visual Programming System

repository·main·Indexed 26 days ago

https://github.com/samuelmtimbo/unit

A next-generation visual programming system and language where programs are represented as graphs of Multi Input Multi Output (MIMO) Finite State Machines (FSM). Unit provides a flow-based programming paradigm for web and Node.js development, unifying UI and logic into a single directed graph. It includes a comprehensive editor for live programming, a core library of logical unit graphs, and the @_unit/unit library for integrating its functionality into JavaScript projects.

Tokens
61.7K
Snippets
45
Records
585
Agent score
89%

What's inside Unit

  1. Understand the Unit programming paradigm

    main

    Unit is a paradigm based on Flow-based Programming where software systems are viewed as compositions of input and output (IO) machines. Unlike traditional textual programming where a function takes an ordered list of arguments and returns a single datum, a unit can receive and send data at any time, in any order, through multiple inputs and outputs.

    Key concepts include:

    • Composition: Building new units by piping and collapsing smaller units together.
    • Decomposition: Breaking down a graph into its constituent smaller units.
    • Directed Graphs: Code in Unit is represented as a directed graph, merging software architecture with actual development.
    • Unified UI and Logic: User interface components are themselves units, meaning they can be composed, decomposed, and inspected alongside the logical circuitry that controls them.
    • No Frontend/Backend Divide: There is no explicit separation between client and server logic. All processes can contain components and communicate through standard channels. APIs like HTTP, File System, and Database are universally available, allowing programs to run seamlessly across different hosts.

  2. Explore the Unit Editor capabilities

    main
    The Unit Editor is the primary environment for live programming interactivity and graph editing. Development and customization of the editor focus on areas such as gestures, modes, input devices, shortcuts, multitouch, data manipulation, performance, accessibility, type systems, debugging, animation, customization, meta-programming, external APIs, sonification, and 3D UI/UX.

  4. Install the @_unit/unit library

    main

    You can use Unit source code as a general-purpose library in any JavaScript project on both Web and Node.js platforms.

    To install it as a project dependency:

    npm install --save @_unit/unit

    To install it globally:

    npm install --global @_unit/unit
    npm install --save @_unit/unit

  5. Use Data Mode (Chartreuse/Yellow Mode)

    main

    Enter Data Mode by clicking the "triangle" mode button or pressing A.

    • Add Random Datum: Double-click the background. If you click an input, the system suggests a compatible random datum.
    • Deep Copy: Drag a unit to create a deep copy with its current state.
    • Instantiate: Long press on a unit class datum to instantiate it.
    • Search Behavior: Searching while in Data Mode switches to adding unit classes instead of instances.

  6. Save, Load, and Import graphs

    main
    • Save: Ctrl + S or use the "export" button in the "share" drawer.
    • Load: Ctrl + O or use the "import" button.
    • Drag and Drop: Drop a .unit file or a folder containing specs into the editor to import them.
      • Injected .unit bundles become visible in Search.
      • If all instances of an injected unit are deleted, the spec is removed from the system.
      • Specs injected via folder drag-and-drop cannot be deleted.

  7. Use and expand the Unit core library

    main

    The Unit system includes a standard collection of logical unit graphs (the "core" library) available out of the box. These are typically defined as JSON files. Reusing these core units helps reduce the global size of units when sharing them.

    Examples of core units include:

    • if else (found in src/system/core/control/IfElse/spec.json)
    • range (found in src/system/core/loop/Range/spec.json)

  10. Serve a local Unit Environment

    main

    You can quickly serve a local Unit Environment using npx.

    To start the server on the default port (4000):

    npx @_unit/unit

    To specify a custom port:

    npx @_unit/unit --port 8042

    Once running, visit http://localhost:4000 in your browser.