Moment Overview

Prefer doing instead of reading?

We recommend you check out https://app.moment.dev and try out our onboarding canvas.

What is Moment?

Moment is a UI toolkit for infrastructure and platform engineers to quickly build self-serve tools. The options are endless, but here are a few of our favorite use cases that increase shipping velocity:

• Interactive, action-oriented runbooks to replace out-of-date docs and copy pasted CLI commands

• Cost management tools for dissecting Kubernetes and non-Kubernetes infrastructure usage and spend by different unit economics specific to your business

• Release management tooling with a ChatGPT summary of the release notes and embedded Datadog charts for monitoring

• Service and Resource Catalogs to help everyone in your org understand who owns what

Moment is powered by Atlas, an authenticating proxy for seamlessly accessing your most sensitive APIs in a canvas. Learn more about Atlas in the Atlas docs.

What is a Canvas?

A canvas is a collaboration space where you can easily create and share with your colleagues. Canvases are comprised of rich text and code snippets that sit alongside each other.

First, let’s walk through the different parts of the canvas.

Cells

Canvases are made up cells, which are the primary building block. There are 2 types of cells: rich text cells and code cells.

Rich Text Cells

Editing rich text works the same way it does in other text editors you’re used to. You can highlight text to format it, or use your keyboard if you’re familiar with markdown syntax.

In addition to editing text, you can insert dynamic content in a canvas with code cells.

Code Cells

Code cells are the other type of cell you’ll encounter in a Moment canvas. Code cells are runnable snippets of Javascript that allow you to do everything you can normally do with Javascript, like import libraries, run functions, or make API calls. You can also write custom components with React.

Code cells can also reference each other. We’ve included a dependency graph in the lower left part of the screen to help you see the relationships between code cells.

You can also copy a cell and edit it below:

Code Editor

The code editor allows you to edit the underlying code for any code cell.

Select any code cell, and click the Toggle code editor icon in the blue bar. Shockingly, this button will toggle the code editor.

After making some edits, press the Run cell button or press shift + return.

If you run a cell, it updates not only that cell, but any cell that depends on it. You can use the code editor to hack any code cell in Moment.

Deeper Dive on Imports

In the code editor, you may see the components like CountdownTimerAlpha. This is a React component we’ve created in our standard library. You can edit any of the properties either in the code editor or in the inspect tab.

Where is CountdownTimerAlpha coming from? If you search the canvas, you'll see an import code cell that looks like the line below was added automatically when you selected the Countdown Timer component from the component tab (see below).

import { DataGridAlphaV2, ButtonAlpha, CountdownTimerAlpha, InputSelectAlpha } from "@moment/stdlib"

If you click on @moment/stdlib at the end of the import line, it will open the Standard Components canvas (or Stdlib). You can find more about this component on the Countdown Timer page.

Properties Pane

The properties pane lives on the right side of the canvas and is accessible with the buttons shown below.

Components Tab

The components tab has a list of code templates you can use in your canvases.

Start by toggling the components tab, or pressing ctrl/⌘ + p. Once you insert a component (either by pressing return or dragging it into the canvas), it creates a fully editable copy that you can change in the code editor. Some templates also include a import cell, which can be placed anywhere in the document—order doesn’t matter like it typically does in code. Import cells often show up at the bottom of the canvas as you add components, but you can move them up and down the page.

Inspect Tab

Some components also have properties that are editable in a UI instead of a code editor. These properties are bidirectionally linked to properties in the code, so you can edit them in either place.

If the code editor and inspect tab are both open and you change a property in the inspect tab, you'll notice how the changes are synced in all three locations.

Comments Tab

You can easily add comments to any cell in a canvas to collaborate with colleagues. Highlight text or select a code cell, and click the Add Comment button to leave a comment.

History Tab

Changes you make in a Moment canvas are saved regularly as drafts. You can see yours and other people’s drafts in the history tab.

Pressing the Save button creates an official numbered version of the canvas, which you can go back to at any point.

Navigation Pane

Finally, you’ll see the navigation pane on the left side of the canvas, which contains pages and a code cell dependency graph. Canvases are made up of individual pages, which can be helpful for organizing canvases that are getting a bit long.