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 have already created your first Moment doc. If you haven’t, follow the Create your first doc guide.
You should already be familiar with the Moment git integration. If you are not, follow the Committing changes guide.
Choosing and inserting a template
Open a Moment doc in the Moment desktop app:
Click the Insert button in the upper-right 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
At first glance, this component looks like a proprietary, built-in part of the Moment UI. It’s 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 this component’s code. 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, by clicking the Commit draft button in the bottom-left corner.
⚠️ 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.
The data used by this component is stored locally in a plain-old JSON file. Click the Commit draft button in the bottom-left corner to 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. Moment provides a static library, but you can fork it or write your own.
For your next steps: