Skip to main content
GoodCraft Script includes a professional code editor powered by CodeMirror 6. Write JavaScript and CSS with syntax highlighting, autocomplete, and your choice of visual themes.

​
Editor features

​
Syntax highlighting

The editor automatically detects JavaScript and CSS, applying language-specific highlighting for keywords, strings, functions, and more.

​
Autocomplete

Press Ctrl+Space (or Cmd+Space on Mac) to trigger autocomplete suggestions. The editor suggests:
  • JavaScript keywords and built-in functions
  • CSS properties and values
  • Variables you’ve defined in your code

​
Bracket matching

Matching brackets, parentheses, and braces are highlighted when your cursor is next to them.

​
Line numbers

Line numbers help you navigate and reference specific lines when debugging.

​
Themes

Choose from 8 editor themes to match your preferences:
ThemeDescription
One DarkDark theme with purple and cyan accents (default)
GitHub LightClean light theme matching GitHub’s style
GitHub DarkDark version of the GitHub theme
DraculaPopular dark theme with vibrant colors
NordArctic-inspired theme with cool blue tones
Solarized LightWarm light theme designed for readability
Solarized DarkDark variant of Solarized
MaterialGoogle Material Design inspired colors
Change your theme in Settings > Editor Preferences.

​
Keyboard shortcuts

ShortcutAction
Ctrl/Cmd + SSave script
Ctrl/Cmd + ZUndo
Ctrl/Cmd + Shift + ZRedo
Ctrl/Cmd + /Toggle comment
Ctrl/Cmd + DSelect next occurrence
Ctrl/Cmd + FFind
Ctrl/Cmd + HFind and replace
TabIndent
Shift + TabOutdent

​
Code validation

The editor performs basic validation as you type:
  • Syntax error detection
  • Unclosed brackets and quotes
  • Invalid expressions
Validation catches common errors but doesn’t replace testing your code in the browser.

​
Version History

Every time you save a script, GoodCraft Script creates a version. Access the full history to:
  • View previous versions
  • Compare changes between versions
  • Restore to any previous version

​
Viewing Version History

  1. Open a script in the editor
  2. Click the History button in the toolbar
  3. The version history panel opens showing all saved versions
Each version shows:
  • Version number
  • When it was saved (relative time like “2h ago”)
  • Source (manual save, auto-save, or git sync)
  • Git commit SHA if synced from Git

​
Comparing Versions

Click any version to see a diff view comparing it to the previous version. Changes are highlighted:
  • Green: Added lines
  • Red: Removed lines

​
Restoring a Version

  1. Select the version you want to restore
  2. Click Restore
  3. The script content is replaced with that version
  4. A new version is automatically created (so you don’t lose your current work)

​
Snapshots

Snapshots are named checkpoints in your version history. Unlike regular auto-saved versions, snapshots have memorable names and are easier to find later.

​
Creating a Snapshot

1

Open Version History

Click the History button in the editor toolbar.
2

Click Create Snapshot

Click the Create Snapshot button in the header.
3

Name your snapshot

Enter a descriptive name like:
  • “Before refactor”
  • “v1.0 release”
  • “Working animation”
  • “Client approved version”
4

Save

Click Create. The snapshot appears in your history with a star icon.

​
Filtering Snapshots

In the version history panel, you can filter to show:
  • All: Every version including auto-saves
  • Snapshots: Only named snapshots
This makes it easy to find important checkpoints without scrolling through every auto-save.

​
When to Create Snapshots

  • Before making major changes
  • After completing a feature
  • When code is client-approved
  • Before experimenting with different approaches
  • At release milestones
Snapshots are especially useful for scripts that evolve frequently. Create one whenever you have a “known good” state you might want to return to.