Bookmarklet and Userscript to set the keybinding, theme and font of Onshape Feature Studio

!Persistent Onshape Feature Studio Settings.md

Persistent Onshape Feature Studio Settings

Introduction

Onshape Feature Studio is based on Ace Editor, so it has support for settings, as described here.

The settings are not persistent though: every time you reload or switch Feature Studio, your preferences are lost. The inbuilt settings menu also only allows you to set font size, not font family.

This gist contains a bookmarklet you can click to quickly re-apply your preferences, including font family, and a userscript that applies them on a regular interval.

Bookmarklet Usage

1. Make a new bookmark in the browser bookmark bar
2. Open feature_studio_settings_bookmarklet.txt and edit the options object with your settings
3. Copy the entire code and paste it as the bookmark URL
4. With a Feature Studio loaded, click the bookmark to apply your settings

Userscript Usage

1. Install a userscript manager:
   • Chrome: Tampermonkey
   • Firefox: Greasemonkey or Tampermonkey
   • Safari: Userscripts
2. Add persistent-feature-studio-settings.user.js
3. Edit the configuration constants at the top of the script
4. Enable the script in your userscript manager
5. Reload any Feature Studio tab

Available Options

Look at options.md to see:

• All available themes
• All available keybindings
• Full list of advanced options you can experiment with

feature_studio_settings_bookmarklet.txt

javascript:(()=>{const options={fontFamily:"Atkinson Hyperlegible Mono",fontSize:"16px",theme:"ace/theme/github_dark",keyboardHandler:"ace/keyboard/vim"},fontUrl="https://fonts.googleapis.com/css?family=Atkinson+Hyperlegible+Mono";if(fontUrl&&!document.querySelector(`link[href="${fontUrl}"]`)){const link=document.createElement("link");link.href=fontUrl;link.rel="stylesheet";document.head.appendChild(link)}const editors=Object.values(window.ace?.editors||{}).concat([...document.querySelectorAll(".ace_editor")].map(el=>el.env?.editor).filter(Boolean));editors.forEach(ed=>ed.setOptions(options));console.log(`[Bookmarklet] Applied settings:`,options)})();

options.md

Options strings

Themes

Bright Themes

Theme Name	Value
Chrome	ace/theme/chrome
Clouds	ace/theme/clouds
Crimson Editor	ace/theme/crimson_editor
Dawn	ace/theme/dawn
Dreamweaver	ace/theme/dreamweaver
Eclipse	ace/theme/eclipse
GitHub Light Default	ace/theme/github_light_default
GitHub (Legacy)	ace/theme/github
IPlastic	ace/theme/iplastic
Solarized Light	ace/theme/solarized_light
TextMate	ace/theme/textmate
Tomorrow	ace/theme/tomorrow
XCode	ace/theme/xcode
Kuroir	ace/theme/kuroir
KatzenMilch	ace/theme/katzenmilch
SQL Server	ace/theme/sqlserver
CloudEditor	ace/theme/cloud_editor

Dark Themes

Theme Name	Value
Ambiance	ace/theme/ambiance
Chaos	ace/theme/chaos
Clouds Midnight	ace/theme/clouds_midnight
Dracula	ace/theme/dracula
Cobalt	ace/theme/cobalt
Gruvbox	ace/theme/gruvbox
Green on Black	ace/theme/gob
idle Fingers	ace/theme/idle_fingers
krTheme	ace/theme/kr_theme
Merbivore	ace/theme/merbivore
Merbivore Soft	ace/theme/merbivore_soft
Mono Industrial	ace/theme/mono_industrial
Monokai	ace/theme/monokai
Nord Dark	ace/theme/nord_dark
One Dark	ace/theme/one_dark
Pastel on dark	ace/theme/pastel_on_dark
Solarized Dark	ace/theme/solarized_dark
Terminal	ace/theme/terminal
Tomorrow Night	ace/theme/tomorrow_night
Tomorrow Night Blue	ace/theme/tomorrow_night_blue
Tomorrow Night Bright	ace/theme/tomorrow_night_bright
Tomorrow Night 80s	ace/theme/tomorrow_night_eighties
Twilight	ace/theme/twilight
Vibrant Ink	ace/theme/vibrant_ink
GitHub Dark	ace/theme/github_dark
CloudEditor Dark	ace/theme/cloud_editor_dark

Keybindings

Keybinding Name	Value
Ace (Default)	null
Vim	ace/keyboard/vim
Emacs	ace/keyboard/emacs
Sublime	ace/keyboard/sublime
VSCode	ace/keyboard/vscode

Advanced: Full list of options you can pass to editor.setOptions()

If you want to edit the code directly, here are all available options. Note that most are irrelevant in the Feature Studio context:

• selectionStyle
• highlightActiveLine
• highlightSelectedWord
• readOnly
• copyWithEmptySelection
• cursorStyle
• mergeUndoDeltas
• behavioursEnabled
• wrapBehavioursEnabled
• enableAutoIndent
• autoScrollEditorIntoView
• keyboardHandler
• showLineNumbers
• relativeLineNumbers
• placeholder
• enableKeyboardAccessibility
• textInputAriaLabel
• enableMobileMenu
• customScrollbar
• hScrollBarAlwaysVisible
• vScrollBarAlwaysVisible
• highlightGutterLine
• animatedScroll
• showInvisibles
• showPrintMargin
• printMarginColumn
• printMargin
• fadeFoldWidgets
• showFoldWidgets
• displayIndentGuides
• highlightIndentGuides
• showGutter
• fontSize
• fontFamily
• maxLines
• minLines
• scrollPastEnd
• fixedWidthGutter
• theme
• hasCssTransforms
• maxPixelHeight
• useTextareaForIME
• useResizeObserver
• useSvgGutterIcons
• showFoldedAnnotations
• scrollSpeed
• dragDelay
• dragEnabled
• focusTimeout
• tooltipFollowsMouse
• firstLineNumber
• overwrite
• newLineMode
• useWorker
• useSoftTabs
• navigateWithinSoftTabs
• tabSize
• wrap
• indentedSoftWrap
• foldStyle
• mode
• enableMultiselect
• enableBlockSelect
• enableBasicAutocompletion
• enableLiveAutocompletion
• liveAutocompletionDelay
• liveAutocompletionThreshold
• enableSnippets
• hardWrap

persistent-feature-studio-settings.user.js

// ==UserScript==
// @name         Persistent Feature Studio Settings
// @namespace    https://github.com/chigozienri
// @version      0.1
// @description  Automatically apply keybinding, theme, and font in Feature Studio
// @author       Chigozie Nri
// @license      MIT
// @match        https://cad.onshape.com/*
// @grant        none
// ==/UserScript==


(function () {
    'use strict';


    // =========================
    // CONFIGURATION
    // =========================
    const KEYBINDING = "ace/keyboard/vim"; // e.g., null (Ace default), "ace/keyboard/vim" or "ace/keyboard/emacs"
    const THEME = "ace/theme/github_dark"; // e.g., "ace/theme/textmate" (default), "ace/theme/github_dark" or "ace/theme/solarized_light"
    const FONT_SIZE = "16px"; // CSS font-size e.g. "16px", "12pt", "1em", "100%"
    const FONT_FAMILY = "Atkinson Hyperlegible Mono"; // CSS font-family e.g. "Courier New", "monospace", "monaco"
    const FONT_FAMILY_URL = "https://fonts.googleapis.com/css?family=Atkinson+Hyperlegible+Mono"; // "" or null if FONT_FAMILY is a standard web-safe font or installed on your machine, URL to font style sheet otherwise
    const POLL_INTERVAL = 500; // milliseconds between checks for new editors

    // =========================
    // LOAD FONT (ONCE)
    // =========================
    let fontLoaded = false;

    function loadFont() {
        if (!fontLoaded && FONT_FAMILY_URL) {
            const link = document.createElement("link");
            link.href = FONT_FAMILY_URL;
            link.rel = "stylesheet";
            document.head.appendChild(link);
            fontLoaded = true;
            console.log("[Persistent Feature Studio Settings] Loaded font:", FONT_FAMILY);
        }
    }

    // =========================
    // APPLY SETTINGS
    // =========================
    function configureEditor(editor) {
        if (!editor || editor.__configured) return;

        const options = {
            fontFamily: FONT_FAMILY,
            fontSize: FONT_SIZE,
            theme: THEME,
            keyboardHandler: KEYBINDING
        };

        editor.setOptions(options);
        editor.__configured = true;

        console.log("[Persistent Feature Studio Settings] Applied options:", options);
    }

    // =========================
    // DETECT EDITORS
    // =========================
    function detectEditor() {
        const aceEl = document.querySelector(".ace_editor");
        if (aceEl?.env?.editor) {
            configureEditor(aceEl.env.editor);
        }
    }

    // =========================
    // INITIALIZE
    // =========================
    loadFont();
    setInterval(detectEditor, POLL_INTERVAL);
})();