I Built a Custom IDE for SharePoint JavaScript Development

This post outlines a browser-based development toolkit created to streamline the analysis, editing, and maintenance of JavaScript libraries within SharePoint.

The tool is built directly into a SharePoint page and provides functionality similar to an IDE, specifically designed for managing front-end SharePoint projects that use multiple JS/CSS files across various folders.

Image description

Purpose

In complex SharePoint environments, it is common to encounter:

  • A large number of JavaScript files
  • Functions declared globally or nested in exported modules
  • Cross-file dependencies that are not explicitly declared
  • Difficulty tracking usage of specific functions or libraries

This tool was developed to solve these problems by offering visibility, searchability, and editing capabilities in a single interface, without leaving SharePoint.

Image description

Core Features

  • Search across all JavaScript (and optionally CSS) files in a SharePoint site
  • Detect and categorize exposed (e.g., window.functionName) vs private functions
  • Build a function-level dependency graph across files
  • Visualize dependencies using a force-directed D3.js graph
  • View and edit JS/CSS files inline using CodeMirror
  • Save changes directly back to SharePoint via the REST API
  • Optionally generate AI-powered summaries or internal analyses (requires OpenAI API key)
  • Minify JavaScript files using Terser in-browser
  • Create new JS/CSS files directly within SharePoint’s Site Assets structure

Image description

Technical Overview

  • File Access: Uses SharePoint REST API to enumerate and fetch files from the selected page’s Site Assets and/or Helper-Libraries folder.
  • Parsing: Analyzes file contents to identify:
    • Named function declarations
    • Global assignments to window
    • Object literals or prototypes exposing methods
  • Dependency Mapping: Tracks usage of exposed functions across files to determine import-like behavior
  • Visualization: Uses D3.js to render interactive graphs with click-based filtering
  • Code Editing: CodeMirror provides syntax highlighting, linting, autocomplete, and keyboard shortcuts
  • Saving: PUT/POST requests are handled with proper etag/version management and digest tokens
  • AI Integration: User can provide an OpenAI API key to enable contextual code summaries or internal behavior analysis
  • UI Framework: Built with a custom UI form generator, no external dependencies outside of D3.js, CodeMirror, and Terser

Image description

Interface Overview

The UI is divided into functional areas:

  • Site/Page Selection: Choose a SharePoint site and page to analyze
  • Library Explorer: List and select files to view/edit
  • Graph View: Visualize function usage across files
  • Editor Panel: Inline editing and live syntax feedback
  • Text Tools: Search and list functions across libraries
  • AI Tools: Optional section for summarization/analysis using GPT
  • Output Sections: Raw results, graph details, and minified output displayed in text areas

Feature Summary

Feature Description
Dependency Graph Visualizes file-to-file usage relationships
Function Analysis Categorizes functions as exposed/private and shows usage context
Code Search Keyword-based search across all libraries
Inline Editing View and edit files with syntax support
File Creation Add new JS/CSS files via UI
Save to SharePoint Update files using the SharePoint REST API
Minification Minify JS files with Terser
AI Integration Optional summaries or logic analysis with OpenAI

Deployment

The tool is deployed directly within SharePoint and does not require any external hosting. It is script-only, embedded via a SharePoint page and uses standard client-side APIs. All processing occurs in-browser.

Let me know what you think.