Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ading2210/sandstone/llms.txt

Use this file to discover all available pages before exploring further.

Sandstone is built with webpack and ships three distinct output bundles from a single source tree. Before you can run the example frontend or integrate Sandstone into your own project, you need to compile those bundles from source. The steps below walk you through cloning the repository, installing dependencies, and running the production build.

Prerequisites

  • Node.js — any actively maintained LTS release
  • npm — bundled with Node.js
  • git — required to clone the repository and for the build to read version metadata

Build steps

1

Clone the repository

Clone Sandstone from GitHub and enter the project directory:
git clone https://github.com/ading2210/sandstone && cd sandstone
2

Install dependencies

Install the Node.js dependencies declared in package.json:
npm install
3

Run the production build

Compile all three bundles in production mode:
npm run build:prod
When the build completes you will find the following files in the dist/ directory:
  • dist/sandstone_frame.js
  • dist/sandstone.js
  • dist/sandstone.mjs

Build outputs

The webpack config produces three separate bundles, each serving a different purpose.
FilePurpose
dist/sandstone_frame.jsFrame-side bundle injected into the sandboxed iframe at runtime
dist/sandstone.jsUMD bundle that exposes a global sandstone variable
dist/sandstone.mjsES module bundle for use with import
sandstone_frame.js contains all the code that runs inside the sandboxed iframe — the JavaScript rewriter, network layer, and DOM patches. Sandstone inlines this file automatically when it creates the iframe; you do not load it directly in your HTML. sandstone.js is the UMD bundle. Include it with a <script> tag and access the library through the sandstone global variable. sandstone.mjs is the ES module bundle. Import it at the top of your own module:
import * as sandstone from "./dist/sandstone.mjs";

Production vs. development commands

npm run build:prod
npm run dev starts webpack in watch mode. It recompiles the bundles automatically whenever you save a source file, which is useful during active development.

Version metadata

The webpack config reads version information directly from git at build time:
const git_hash = execSync("git rev-parse --short HEAD").toString().trim();
const git_tag = execSync("git tag -l --contains HEAD").toString().trim();
If the current commit has a matching git tag, the build uses that tag as the version string. Otherwise it appends -dev to the version declared in package.json. Both __VERSION__ and __GIT_HASH__ are injected as compile-time constants so the runtime can report the exact build it was compiled from.

Build docs developers (and LLMs) love