What is Moment?

Getting started

Download and install

Create your first doc

Committing changes

Adding interactive components

Publishing a doc

Editing and formatting

Programming Moment docs

A tour of Moment's programming model

How Moment works

Local disk structure

Download

Discord

Moment docs

Get started quickly with the Moment desktop app.

return render(() => (
	<div
		className="text-sm grid grid-cols-2 gap-2"
		style={{ "grid-template-columns": "repeat(2, minmax(0, 1fr))" }}
	>
		<designSystem.LinkButtonAlphaV2
			href="/docs/download"
			size="lg"
			elevation="flat"
			className="flex-col gap-1 p-4 !no-underline text-wrap"
		>
			<div className="w-full text-left text-base font-bold">Download and install</div>
			<div className="w-full text-secondary">
				Start here to jump straight into document editing with the Moment desktop app.
			</div>
		</designSystem.LinkButtonAlphaV2>
		<designSystem.LinkButtonAlphaV2
			href="/docs/your-first-doc"
			size="lg"
			elevation="flat"
			className="flex-col gap-1 p-4 !no-underline text-wrap"
		>
			<div className="w-full text-left text-base font-bold">Create your first doc</div>
			<div className="w-full text-secondary">Write your first Moment doc!</div>
		</designSystem.LinkButtonAlphaV2>
		<designSystem.LinkButtonAlphaV2
			href="/docs/committing-changes"
			size="lg"
			elevation="flat"
			className="flex-col gap-1 p-4 !no-underline text-wrap"
		>
			<div className="w-full text-left text-base font-bold">Committing changes</div>
			<div className="w-full text-secondary">
				Inspect changes made and commit them to document history.
			</div>
		</designSystem.LinkButtonAlphaV2>
		<designSystem.LinkButtonAlphaV2
			href="/docs/add-interactive-components"
			size="lg"
			elevation="flat"
			className="flex-col gap-1 p-4 !no-underline text-wrap"
		>
			<div className="w-full text-left text-base font-bold">
				Adding interactive components
			</div>
			<div className="w-full text-secondary">
				Add interactive components like live tables to your Moment doc.
			</div>
		</designSystem.LinkButtonAlphaV2>
		<designSystem.LinkButtonAlphaV2
			href="/docs/publishing"
			size="lg"
			elevation="flat"
			className="flex-col gap-1 p-4 !no-underline text-wrap"
		>
			<div className="w-full text-left text-base font-bold">Publishing a doc</div>
			<div className="w-full text-secondary">Turn a Moment doc into a public web page.</div>
		</designSystem.LinkButtonAlphaV2>
	</div>
));
