Adding interactive components
Moment docs are natively programmable with JavaScript. If you can import it from npm, or write it in code, you can do it in Moment!
This guide will demonstrate how to quickly make Moment docs interactive by using one of Moment’s pre-created component templates.
Prerequisites
This guide builds on two things you should have done at this point:
You should already have created your first Moment doc. If you have not, follow the guide Create your first doc.
You should already be familiar with the Moment git integration. If you are not, follow the guide Committing changes.
Choosing and inserting a template
Open a Moment doc in the Moment desktop app:
Click the Insert button in the upper-righthand corner:
Select the Task Tracker template:
This will insert the Task Tracker template into your document:
And that’s it! You have an interactive table. Try editing it:
Viewing and changing the code of a component
On the face of it, this component looks like a proprietary, built-in part of the Moment UI. It is not. In fact, nothing inside a Moment doc is built-in.
With the table selected, click the View code button that appears below:
At the bottom of the window you will see a code editor containing the code for this component. This code simply renders a <DataGridAlphaV3 />, which is a part of Moment’s standard component library.
ℹ️ You can change this code. It is yours, and it is part of the Moment doc. This is a particularly complicated example, though, so you may want to start with Programming Moment docs.
Viewing the code with git diff
As an aside, because Moment docs are ultimately Markdown files on disk, it is possible to view these changes with either git diff or the Moment-native git integration, clicking the Commit draft button in the bottom left.
⚠️ If you are not familiar with Moment’s git integration, see the Committing changes guide for more information.
Where is the data stored?
As you interact with this component, you will notice that it saves the state. For example, adding a task, or changing the status of the task will persist.
This data used by this component is stored locally, in a plain-old JSON file. Clicking the Commit draft button in the bottom left corner, you can see the changes:
ℹ️ How do you read and write from
pageStorage.json? The Moment runtime exposes tools for both building your own React components, and for programmatically manipulating storage with plain JavaScript. See Programming Moment docs for more information.
Conclusions and next steps
This example illustrates several things that make Moment unique:
Moment is programmable with JavaScript. Here we are using Moment’s standard component library, but we can import our own component library (e.g., MUI, Radix, etc.).
You own all of the data. There is no need for an “eject” or “export” step because you already have all your data.
None of the UI is proprietary; all of it is hackable. In other products embedded tables and databases are special, and built into the product. Momeny provides a static library, but you can fork it or write your own.
For your next steps: