// Hello human! // Scroll is a language // evolved by humans // for humans. // This is the SDK that powers // the higher layers. // This is just the beginning! // A hui hou, // -Breck
header.scroll permalink index.html title ScrollSDK css :root { --scrollPrimaryRgb: 43, 104, 99; --scrollSurfaceRgb: 215, 222, 217; --scrollColorBackground: #faf9f6; --scrollColorText: #343c3b; --scrollColorLink: #286b65; --scrollColorSubdued: #687370; --scrollFontPrimary: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --scrollFontUi: var(--scrollFontPrimary); --scrollFontMono: ui-monospace, SFMono-Regular, Consolas, monospace; --scrollBaseFontSize: 17px; } body { padding: 3.5rem 0 2rem; } html { hyphens: none; } h1, h2, h3, h4 { color: #263e3a; line-height: 1.35; font-weight: 600; } h1 { margin: 2.25rem 0 0.75rem; font-size: 1.4rem; letter-spacing: -0.02em; } h2 { margin: 1.75rem 0 0.65rem; font-size: 1.15rem; } h1.printTitleParser { font-size: clamp(2rem, 6vw, 2.8rem); letter-spacing: -0.045em; } h1.printTitleParser + .scrollSection > h1 { max-width: 36rem; margin: 0.75rem auto 2.5rem; padding: 0 1.25rem; text-align: center; color: var(--scrollColorSubdued); font-size: 1.1rem; font-weight: 400; letter-spacing: 0; } p, li { line-height: 1.7; } p.scrollParagraph { margin-top: 0.85rem; text-align: left; overflow-wrap: break-word; } .scrollContainerParser .scrollSection > :is(h1, h2, h3, h4) { text-align: left; } ul { padding-left: 1.2rem; margin: 0.75rem 0 1.25rem; } li { padding-left: 0.2rem; } li::marker { color: #8b9d96; } a { text-underline-offset: 0.2em; text-decoration-color: #afc9c1; } a:hover { color: #174d48; text-decoration-color: currentColor; } a:focus-visible { outline: 2px solid var(--scrollColorLink); outline-offset: 4px; border-radius: 2px; } .scrollCodeBlock { margin: 1rem 0 1.5rem; padding: 1rem 1.15rem; border: 1px solid #dce3dd; border-radius: 8px; background: #eff2ed; color: #334a42; font-family: var(--scrollFontMono); font-size: 0.85rem; line-height: 1.65; } .abstractDinkusParser { margin: 2rem 0; padding: 0.5rem; color: #8b9d96; } h4.scrollQuestion { margin-top: 1.75rem; font-size: 1rem; } .scrollCaptionedFigure { margin: 1.25rem 0; } .scrollCaptionedFigure img { border-radius: 6px; } .abstractTextLinkParser { font-family: var(--scrollFontUi); font-size: 0.85rem; } .abstractTextLinkParser a { color: var(--scrollColorSubdued); } @media (max-width: 640px) { body { padding-top: 3rem; } .scrollContainerParser { padding: 0 1.25rem; } h1 { font-size: 1.25rem; } } printTitle
Particles, Parsers, and other code for building Scroll
container 700px
- Scroll Homepage
- The World Wide Scroll
Tools
- Parser Designer
- Particles Sandbox
Docs
- SDK Release Notes
- Particles Homepage
- Particles FAQ
- WWS Subreddit
Tests
https://github.com/breck7/scrollsdk/actions/workflows/didTheTestsPass.yaml/badge.svg width 153px https://github.com/breck7/scrollsdk/actions/workflows/didTheTestsPass.yaml- ScrollSDK Node Tests
- ScrollSDK Browser Unit Tests
- ScrollSDK Browser Perf Tests
*
? What is this repo? This repo contains the code for Particle Syntax and the Parsers Programming Language. These are the core layers upon which Scroll is built.
? Who is this for? This repo is for advanced Scroll developers.
? How do I build Parsers? You can try the Parsers tutorial. parsersTutorial.html Parsers tutorial
*
Writing Parsers
This ScrollSDK contains two implementations of Parsers: one in TypeScript and one in Parsers.You write Parsers to extend Scroll. By creating Parsers with the SDK you get a parser, a type checker, syntax highlighting, autocomplete, a compiler, and virtual machine for executing your version of Scroll. The ScrollSDK also includes a simple web IDE for writing Parsers called Parser Designer. designer/index.html Parser Designer
At this point in time, to make your Parsers do very useful things, you also need to use another language that you know. The ScrollSDK lets you create new languages using just Scroll or Scroll + Javascript. Parsers can include code from any programming language, not just Javascript. Though at the moment only Scroll + Javascript is supported.
*
Using the ScrollSDK
The ScrollSDK currently includes a number of libraries and apps to use (scripts in the "products" folder).Install directly from GitHub (Node.js 24+): code npm install github:breck7/scrollsdk
The SDK has zero runtime package dependencies. Built JavaScript is committed, so installing from GitHub needs no build step. Pin a commit with github:breck7/scrollsdk#COMMIT for reproducible installs.
Development uses npm for third-party tools; Scroll packages come from GitHub. Clone the repo and run npm install before building or testing. npm run buildSdk builds the SDK; npm run buildDocs builds the website. Parser compilation no longer formats with Prettier by default; install Prettier 2 and pass true for usePrettier to opt in.
Basic Particles library for Node.js projects:
code const {Particle} = require("scrollsdk/products/Particle.js") const particle = new Particle("hello world") console.log(particle.asString)Basic Particles Library + Parsers for the browser:
codeParticles Sandbox web app for exploring base Particles
code npm install . npm run local open http://localhost:3333/Parser Designer web app for building new Parsers
code npm install . npm run local open http://localhost:3333/designerBuild Tools
If you look at the source, you will also see a set of build tools (such as Builder and TypeScriptRewriter). These are currently undocumented and not recommended for external use.Building all tools and running tests
code npm run buildSdk npm test*
Monorepo
The ScrollSDK is a monorepo. With on average over 1 major version released each month for the past 2.5 years, it would take a lot of overhead to constantly be updating 10+ different repositories and modules every month. Once we're more confident in the theory and best practices, it might make sense to break this repo into independent modules. That being said, we despise unnecessary dependencies as much as anyone. If anyone wants to create some automated submodules built from the projects in this monorepo, to allow for consuming of a smaller subset of the code and dependencies in this module, feel free to do so.*
Visualization of the code base
https://mango-dune-07a8b7110.1.azurestaticapps.net/?repo=breck7%2Fscrollsdk Visualization image images/diagram.jpg*
Development Status
All breaking changes are mentioned in the releaseNotes. We follow semantic versioning, so breaking changes should not happen if you stay on the same major version. releaseNotes.html releaseNotes*
Particles Libraries in Other Languages
If you build a Particles library/SDK in another language, let us know and we'll add a link.If you are working on a Particles library in a new host language, feel free to post an issue or ask for help in the WWS subreddit. https://www.reddit.com/r/WorldWideScroll WWS subreddit
*
How to bump versions
code npm run updateVersion NEW_NUMBER*
Former Name
Particles was originally called Tree Notation. Parsers was originally called Grammar.*
Alternatives Considered
This is the first Particles and Parsers libraries in existence, so there were no alternative implementations. Note and Space were predecessors to Particles. If a better alternative low level syntax to Particles is possible, it has yet to be discovered.All that said, the important part of this repo is not the code but the design patterns. Particles is very simple, and you can implement the patterns contained here in your own code without using this library. In fact, that is often the best way to use Particles!
Editing in Sublime Text
It is helpful to set"goto_anything_exclude_gitignore": true to ignore files in gitignore. Read more here.
https://breckyunits.com/code/my-sublime-setttings.html here
❤️ Public Domain ❤️
footer.scroll