Boost Your React Workflow with Mometa: A Low‑Code Visual Editor

Mometa, the number‑one project on this week’s GitHub trending list, is a low‑code, meta‑programming tool aimed at developers. It provides visual code editing, customizable team material libraries, multi‑language support (currently React), plugin‑based Webpack integration, and hot‑update‑friendly material libraries.

Key Features

Visual code editing tailored for developers

Customizable team material library

Multi‑language and ecosystem support (React now, Vue planned)

Webpack >=4 plugin‑based integration

Hot‑update‑compatible material library that preserves existing development workflows

Mometa adds visual coding capabilities on top of local development; you still need to understand code, but it helps boost efficiency.

Usage Overview

Typical workflow for a new project:

Use the team command to create an empty placeholder route and page.

Open Mometa, browse local and remote material markets, drag the needed components, and generate a basic page layout.

Switch to your IDE to handle data integration and source‑code development.

For optimizing an existing feature:

Enter Mometa and insert material.

Reverse‑locate the component to jump directly to the source code in the IDE.

Reverse locating lets you jump from a visual element to its code position, as shown below:

Quick Start

Install dependencies and set up the editor:

pnpm install
pnpm run start:app:cr # start local development preview

npm i @mometa/editor -D

npm i @mometa-mat/antd -D

Create mometa-material.config.js in the project root:

module.exports = [require('@mometa-mat/antd').default]

Add the Mometa editor plugin to webpack.config.js:

const MometaEditorPlugin = require('@mometa/editor/webpack')

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        // Only process files you need to edit
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
          plugins: [isEnvDevelopment && require.resolve('@mometa/editor/babel/plugin-react')]
        }
      }
    ]
  },
  plugins: [
    isEnvDevelopment &&
      new MometaEditorPlugin({
        react: true,
        experimentalMaterialsClientRender: true
      })
  ]
}

Do not enable the official react-refresh preset. Then start the Webpack dev server and open http://localhost:${port}/mometa/ to begin visual editing.

Underlying Implementation

Mometa injects meta‑information into JSX via a Babel plugin ( babel/plugin-react). For example, the following React component is transformed to include a __mometa prop containing source location, filename, and other metadata:

function App() {
  const [list] = React.useState(['p1', 'p2'])

  return (
    <div __mometa={{
      start: { line: 5, column: 4 },
      end: { line: 10, column: 4 },
      filename: '/App.tsx',
      name: 'div',
      text: 'raw text'
    }}>
      <h1 __mometa={{...}}>Title</h1>
      {list.map((text, i) => (
        <p __mometa={{...}} key={i}>{text}</p>
      ))}
    </div>
  )
}

Explore Mometa further by trying it out yourself; the repository link is available upon request.