Overview

Welcome, plugin developers! In this section, we’ll guide you through the plugin development process.

Before start

Before diving into plugin development, it’s essential to have a basic understanding of the following:

• Re:Earth Visualizer Plugin System
• General Web Development

Plugin development is fundamentally a web development process. You can use any web development framework or library of your choice and work with your preferred IDE.

Structure of a plugin

A built Re:Earth Visualizer plugin should be a compressed .zip file containing the following:

• reearth.yml: A configuration file specifying the plugin’s metadata.
• ${extension_name}.js: One or more JavaScript files for the extensions.

reearth.yml

The reearth.yml file is a YAML file that contains metadata about the plugin. It specifies the plugin’s name, version, description, extensions, and other information. Here is an example of a reearth.yml file:

reearth.yml

id: demo-plugin
name: Demo Plugin
version: 1.0.0
extensions:
  - id: demo-widget
    type: widget
    name: Demo Widget

Caution

id: Supports using a-zA-Z0-9_-, max 100 chars, reearth is not allowed.

Note

For detailed schema of reearth.yml, please refer to Re:Earth Visualizer Plugin Manifest.

Extension JavaScript

Each extension defined in reearth.yml should have a corresponding JavaScript file. The JavaScript file contains the logic for the extension.

Caution

The extension id and the JavaScript file name should match exactly. Please avoid using spaces or any special characters.

This JavaScript will be executed by QuickJS, so please ensure your code adheres to the QuickJS syntax.

The Re:Earth Visualizer Plugin API is exposed globally, allowing you to fully utilize its capabilities to interact with the Re:Earth Visualizer, render custom UI, and more.

Here is an example of a simple extension JavaScript file:

demo-widget.js

reearth.ui.show(`<h1>Hello, World!</h1>`);

Compose and install

Once you have prepared these two files (or additional extension JavaScript files, if needed), you can build the plugin by compressing them into a .zip file. After that, you can install it into any Re:Earth Visualizer Project.

What’s Next?

The plugin development process is designed to be straightforward. Regardless of the framework or library you choose, the final output is simply a .zip file containing the plugin’s metadata and the extension JavaScript files.

However, you may have noticed a challenge: once the plugin is prepared, you need to install it into a Re:Earth Visualizer project, add the extension to the scene (or story page, or infobox), and then observe how it works. This workflow can make testing and debugging extensions more cumbersome, ultimately impacting the development experience.

We have two measures to solve the problem:

• DEV_PLUGIN Feature: Re:Earth Visualizer includes a feature called DEV_PLUGIN, which allows you to load plugins directly from a local development server.
• Plugin Template: We provide a plugin template pre-configured with React, ShadCN, Tailwind CSS, and the necessary scripts for building and serving plugins efficiently.

By combining these tools, you can streamline the plugin development process, enabling easy UI development and instant updates in Re:Earth Visualizer without the need to repeatedly build and install the plugin.

Read this for more details:

Recommended Workflow