Mometa

Mometa este un editor de cod vizual bazat pe AST și un instrument de metaprogramare low-code. Acesta oferă o interfață vizuală pentru modificarea codului sursă prin manipularea arborelui sintactic abstract, permițând inserarea și ștergerea blocurilor de cod prin acțiuni de tip drag-and-drop.

Proiectul se distinge printr-un sistem de mapare vizuală a sursei care leagă elementele DOM randate înapoi la pozițiile lor originale din codul sursă. Utilizează un sistem de sincronizare în timp real și un flux de lucru de hot module replacement pentru a actualiza componentele aplicației în browser fără a necesita o reîncărcare completă a paginii.

Platforma acoperă gestionarea componentelor UI și crearea de biblioteci de materiale reutilizabile. Include capabilități pentru generarea de cod bazată pe metadate, simularea rutelor și a layout-urilor, precum și organizarea spațiului de lucru monorepo pentru a coordona pachete și dependențe multiple.

Features

Metaprogramming Tools - Provides a visual editor using templates and abstractions to automate the generation of source code and asset structures.
Visual Code Editors - Provides a visual interface for modifying source code through AST manipulation and drag-and-drop interactions.
Low-Code Metaprogramming Interfaces - Uses low-code metaprogramming interfaces to visually generate and manage structured source code.
Code Generation Templates - Produces consistent source code components by applying structural patterns to extracted asset metadata.
Visual-to-Code Navigators - Links visual elements in the editor to their corresponding source code symbols and files for seamless IDE transition.
Source-to-Visual Metadata Injection - Injects structural metadata during compilation to enable bidirectional mapping between the UI and original source code.
Web Application Hot Reloading - Updates running web application components in the browser instantly without requiring a full page refresh.
Hot Module Replacement - Implements a workflow that updates application components and styles in real-time without page reloads.
Hot Module Replacement Workflows - Implements a real-time synchronization system using hot module replacement to update components without full page reloads.
Rendered Element Source Mapping - Maps rendered UI elements in the browser directly back to their specific line of source code.
Visual Code Manipulation - Modifies source code through a visual interface, using AST manipulation to bridge the gap between visual editing and raw text.
DOM-to-Source Mappings - Links rendered browser DOM elements back to their original source code positions via structural metadata.
Template-Based Code Generators - Automates the creation of source code components using dynamic templates and structured asset metadata.
Visual Source Code Editors - Offers a visual editor that links rendered UI elements to source code for direct codebase manipulation.
Runtime Application Synchronization - Synchronizes the state of the live running web application, including routing and styling, with the visual editor.
AST-Based Code Manipulation - Implements precise source code modifications by manipulating the underlying abstract syntax tree via a visual interface.
HMR State Synchronizers - Uses hot module replacement to push real-time component updates to the browser without triggering full page reloads.
UI Component Development - Facilitates the building of web interfaces using discrete UI components synchronized between a visual editor and IDE.
UI Component Management - Provides a system for organizing and implementing a standardized set of reusable UI components and structural metadata.
DOM-Aligned Editing Guides - Provides dynamic visual overlays that track browser DOM nodes to align editing guides with rendered elements.
Build Plugin Integrators - Connects to the development toolchain via plugins to enable hot module replacement and real-time updates.
Monorepo Workspace Managers - Coordinates development environments and dependencies across multiple packages within a single monorepo.
UI Route and Layout Simulations - Verifies visual behavior and responsive layouts by simulating application routing transitions before deployment.
Component Library Managers - Provides a system for assembling and customizing a library of reusable interface components.
Custom Component Builders - Enables the creation of bespoke interface elements and custom blocks to accelerate development.
Material Component Insertions - Adds pre-defined material components into the codebase via a visual interface to accelerate interface development.
Low-Code and Visual Builders - Visual design and editing platform for developers.
Low-Code and Visual Tools - Visual code editor for React projects.

Istoric stele

imcuttlemometa

Name: imcuttle/mometa
Author: imcuttle

View on GitHub

4,091 stele612 fork-uriTypeScriptMIT5 vizualizări

Mometa

Features

Metaprogramming Tools - Provides a visual editor using templates and abstractions to automate the generation of source code and asset structures.
Visual Code Editors - Provides a visual interface for modifying source code through AST manipulation and drag-and-drop interactions.
Low-Code Metaprogramming Interfaces - Uses low-code metaprogramming interfaces to visually generate and manage structured source code.
Code Generation Templates - Produces consistent source code components by applying structural patterns to extracted asset metadata.
Visual-to-Code Navigators - Links visual elements in the editor to their corresponding source code symbols and files for seamless IDE transition.
Source-to-Visual Metadata Injection - Injects structural metadata during compilation to enable bidirectional mapping between the UI and original source code.
Web Application Hot Reloading - Updates running web application components in the browser instantly without requiring a full page refresh.
Hot Module Replacement - Implements a workflow that updates application components and styles in real-time without page reloads.
Hot Module Replacement Workflows - Implements a real-time synchronization system using hot module replacement to update components without full page reloads.
Rendered Element Source Mapping - Maps rendered UI elements in the browser directly back to their specific line of source code.
Visual Code Manipulation - Modifies source code through a visual interface, using AST manipulation to bridge the gap between visual editing and raw text.
DOM-to-Source Mappings - Links rendered browser DOM elements back to their original source code positions via structural metadata.
Template-Based Code Generators - Automates the creation of source code components using dynamic templates and structured asset metadata.
Visual Source Code Editors - Offers a visual editor that links rendered UI elements to source code for direct codebase manipulation.
Runtime Application Synchronization - Synchronizes the state of the live running web application, including routing and styling, with the visual editor.
AST-Based Code Manipulation - Implements precise source code modifications by manipulating the underlying abstract syntax tree via a visual interface.
HMR State Synchronizers - Uses hot module replacement to push real-time component updates to the browser without triggering full page reloads.
UI Component Development - Facilitates the building of web interfaces using discrete UI components synchronized between a visual editor and IDE.
UI Component Management - Provides a system for organizing and implementing a standardized set of reusable UI components and structural metadata.
DOM-Aligned Editing Guides - Provides dynamic visual overlays that track browser DOM nodes to align editing guides with rendered elements.
Build Plugin Integrators - Connects to the development toolchain via plugins to enable hot module replacement and real-time updates.
Monorepo Workspace Managers - Coordinates development environments and dependencies across multiple packages within a single monorepo.
UI Route and Layout Simulations - Verifies visual behavior and responsive layouts by simulating application routing transitions before deployment.
Component Library Managers - Provides a system for assembling and customizing a library of reusable interface components.
Custom Component Builders - Enables the creation of bespoke interface elements and custom blocks to accelerate development.
Material Component Insertions - Adds pre-defined material components into the codebase via a visual interface to accelerate interface development.
Low-Code and Visual Builders - Visual design and editing platform for developers.
Low-Code and Visual Tools - Visual code editor for React projects.

Alternative open-source pentru Mometa

Proiecte open-source similare, clasificate după numărul de funcționalități comune cu Mometa.

gaearon/react-hot-boilerplate
gaearon/react-hot-boilerplate
3,892Vezi pe GitHub
This project is a live-editing development environment and React component boilerplate. It serves as a project starter and template designed to enable the updating of React components in the browser without refreshing the page. The environment focuses on React hot reloading to provide a frontend development workflow where code changes are reflected instantly in the user interface. This supports live UI prototyping by allowing modifications to styles and component logic without losing the current application state. The setup incorporates a development server, module replacement, and transpila
JavaScript
Vezi pe GitHub3,892
aidenybai/react-grab
aidenybai/react-grab
5,110Vezi pe GitHub
React Grab is a browser-based code navigator and component inspector that links rendered user interface elements to the specific files and lines of source code where they are defined. It serves as a bridge between the browser interface and a local codebase to facilitate element identification and analysis. The tool functions as a developer extension for React applications, mapping visual components to their originating source code. This capability provides specific code context to support manual review and AI-assisted development. The project includes a framework for extending the browser in
TypeScriptaicodingreact
Vezi pe GitHub5,110
concrete-utopia/utopia
concrete-utopia/utopia
3,783Vezi pe GitHub
Utopia is a development platform for building React components through a visual interface that synchronizes changes directly with underlying source code. It functions as an AST-based code editor and a visual component editor, using abstract syntax tree manipulation to update files while preserving the original formatting and structure. The project features an in-browser module bundler that compiles and executes JavaScript modules directly within the browser to provide immediate feedback without server-side build steps. It also includes a pull request preview tool for inspecting and validating
TypeScriptfuturenowutopia
Vezi pe GitHub3,783
insin/nwb
insin/nwb
5,542Vezi pe GitHub
nwb is a zero-configuration build toolchain, module bundler, and development server for JavaScript and JSX applications and libraries. It functions as a build system that automatically derives compiler and bundler settings from a project's installed dependencies to remove manual setup. The tool is distinguished by its ability to act as a library compiler, generating multiple distribution formats such as ESM and CJS from a single source for package manager compatibility. It also includes a dedicated headless browser test runner that executes unit tests with integrated watch mode and code cover
JavaScript
Vezi pe GitHub5,542

Vezi toate cele 30 alternative pentru Mometa

Întrebări frecvente

Ce face imcuttle/mometa?

Care sunt principalele funcționalități ale imcuttle/mometa?

Principalele funcționalități ale imcuttle/mometa sunt: Metaprogramming Tools, Visual Code Editors, Low-Code Metaprogramming Interfaces, Code Generation Templates, Visual-to-Code Navigators, Source-to-Visual Metadata Injection, Web Application Hot Reloading, Hot Module Replacement.

Care sunt câteva alternative open-source pentru imcuttle/mometa?

Alternativele open-source pentru imcuttle/mometa includ: concrete-utopia/utopia — Utopia is a development platform for building React components through a visual interface that synchronizes changes… gaearon/react-hot-boilerplate — This project is a live-editing development environment and React component boilerplate. It serves as a project starter… aidenybai/react-grab — React Grab is a browser-based code navigator and component inspector that links rendered user interface elements to… insin/nwb — nwb is a zero-configuration build toolchain, module bundler, and development server for JavaScript and JSX… mattdesl/canvas-sketch — canvas-sketch is a JavaScript generative art framework and web-based creative coding environment. It provides a system… preactjs/preact-cli — preact-cli is a command line tool for scaffolding, developing, and building applications using the Preact library. It…