DevStack

Elevate your development environment with precision-engineered tooling. DevStack represents a comprehensive integration of over 81+ essential development utilities within a unified VSCode extension, providing complete functionality while maintaining optimal performance standards and system resource efficiency.

Features

To facilitate navigation through this comprehensive documentation—which encompasses functionality equivalent to over 100 extensions—each section includes direct links to corresponding detailed documentation for deeper exploration. The modular architecture allows individual features to be utilized independently, eliminating the need to master the entire system before implementation. For those preferring a complete walkthrough, the full documentation site provides sequential coverage of all capabilities. This documentation structure prioritizes recently introduced features at the top, enabling existing users to quickly identify and adopt new functionality. Given the extensive scope of available tools and features, this approach ensures that valuable additions remain visible and accessible to the established user base. New users are recommended to begin with the foundational concepts outlined in the Virtual Filing System section.

NEW Catalyst UI

• Visit Section

NEW MD Viewer / Renderer

• Visit Section

NEW // #dev ( // #region variant )

• Visit Section

NEW Left Off Note

• Visit Section

NEW Shortcuts

• Visit Section

NEW Editor / Context Note

• Visit Section

NEW Open GitHub Repo At File

• Visit Section

NEW Find Errors, Missing Imports & More

• Visit Section

NEW Create Export Index ( registry )

• Visit Section

NEW Concurrent Command Execution

• Visit Section

NEW Convert Remix-Run File to X Platform

• Visit Section

NEW Tailwind Converter

• Visit Section

Everything beyond this point, would not be considered 'new' functionality. If your already familiar with the extension, your safe to stop here.

Virtual Filing System

• Comprehensive organization system that eliminates the need for multiple extensions
• UI for creating, editing, and moving folders/items without manual config editing
• Supports multiple item types: files, folders, URLs, commands, snippets, chains
• Project-agnostic configuration with global and workspace-specific settings

For detailed usage instructions and advanced features, visit the complete documentation

Virtual Filing System Usage

For detailed usage instructions and advanced features, visit the complete documentation

VSCode Commands

• Preset VSCode, PowerShell, and Bash commands with required flags
• Cheat sheet with 360+ commonly used commands
• Easy command creation and management

For detailed usage instructions and advanced features, visit the complete documentation

PowerShell Commands

For detailed usage instructions and advanced features, visit the complete documentation

Debian WSL Bash Commands

For detailed usage instructions and advanced features, visit the complete documentation

VSCode Commands Cheat Sheet

For detailed usage instructions and advanced features, visit the complete documentation

Chain Execution & Creating Command Chains

• Execute sequences of VSCode/shell commands with one click
• No limits on command quantity or length
• Hidden commands keep navigation clean while allowing complex workflows
• Open the DevStack sidebar
• Navigate to "Create Chain"
• Add commands with labels and paths
• Reorder execution as needed
• Save to make available in your workflow
• Configuration
• File Locations Global config: AppData/Roaming/Code/User/globalStorage/skyler.ocrmnav/global-navigator-config.json
• Workspace config: AppData/Roaming/Code/User/globalStorage/skyler.ocrmnav/project-configs/project-{uniqueID}.json
• Global snippets: AppData/Roaming/Code/User/globalStorage/skyler.ocrmnav/ocrmnavigator.code-snippets

For detailed usage instructions and advanced features, visit the complete documentation

The filing system is virtual - original files remain unchanged Folders support two levels of depth (three with hidden items) Markdown files are stored in .vscode folder All changes are saved to JSON configuration files

Concurrent Command Execution

For detailed usage instructions and advanced features, visit the complete documentation

Config file

For detailed usage instructions and advanced features, visit the complete documentation

Project Agnostic Configuration

For detailed usage instructions and advanced features, visit the complete documentation

Markdown Editor and Viewer

• Rich text editor with live preview
• File explorer and outline navigation
• Focus mode and export capabilities

For detailed usage instructions and advanced features, visit the complete documentation

Markdown Cheat Sheet

• Cheat sheet with GitHub-flavored Markdown examples

For detailed usage instructions and advanced features, visit the complete documentation

Readme Generator

For detailed usage instructions and advanced features, visit the complete documentation

Snippets

• Global snippet management
• Intuitive creation/editing interface
• Fuzzy search and quick insertion
• Automatic workspace synchronization

For detailed usage instructions and advanced features, visit the complete documentation

Snippets Viewer

For detailed usage instructions and advanced features, visit the complete documentation

Editor Context Snippets

For detailed usage instructions and advanced features, visit the complete documentation

Context Snippets

For detailed usage instructions and advanced features, visit the complete documentation

File Formatting

• Live preview of formatting changes
• 33+ supported file types (expanding to 72)
• Sticky preview panel that follows your scroll
• Right-click formatting options

For detailed usage instructions and advanced features, visit the complete documentation

Inline Imports

For detailed usage instructions and advanced features, visit the complete documentation

Remove Trailing Commas

For detailed usage instructions and advanced features, visit the complete documentation

Batch Rename

• Batch Rename: Mass edit filenames via generated .txt file

For detailed usage instructions and advanced features, visit the complete documentation

Add Missing Imports w/ Global Config

For detailed usage instructions and advanced features, visit the complete documentation

Add ESLint & Prettier Configs

For detailed usage instructions and advanced features, visit the complete documentation

Remix Run

For detailed usage instructions and advanced features, visit the complete documentation

npx create-remixv2

Even though remix is no longer among us, for the next couple of months I still want to use it for the projects I have lined up. The builder takes in a couple of params, one of them to configure what stack you want to use. You can choose from on of the 30 or so I put in the builder that you can choose from, just the top 30 remix-run stacks. If you need something that isnt there, thats fine just reference the stack like you did with the old builder.

npx create-remixv2

• Choose package manager and template at build time
• Select from 30+ popular stacks
• Custom stack reference via user/repo

For detailed usage instructions and advanced features, visit the complete documentation

Auto Create Action

• Form Detection: Scans for
  and fetcher.Form components
• Intent + Schema Parsing: Extracts intent from form data
• Prisma Method Inference: Auto-detects CRUD operations
• VS Code Integration: Works with active editor, shows warnings when no forms found

For detailed usage instructions and advanced features, visit the complete documentation

Bane Remix Run Stack

For detailed usage instructions and advanced features, visit the complete documentation

Context Components / Functions

For detailed usage instructions and advanced features, visit the complete documentation

V2 -> V1 Routing Convention Conversion

• Converts route conventions automatically
• Safety rollback if issues occur
• Warning: Always push before conversion

For detailed usage instructions and advanced features, visit the complete documentation

Convert single project app to mono repo

For detailed usage instructions and advanced features, visit the complete documentation

Open Route File In Browser - Remix Run

• Browser preview functionality
• URL copying to clipboard

For detailed usage instructions and advanced features, visit the complete documentation

Create Route Files - Remix Run

• Quick route file creation

For detailed usage instructions and advanced features, visit the complete documentation

Context Components / Functions - Remix-Run

• Right-click in editor → Remix Components → Select component to insert

For detailed usage instructions and advanced features, visit the complete documentation

Routing Convention Conversion Remix-Run

For detailed usage instructions and advanced features, visit the complete documentation

Install Auth in Remix w/ Auth Routes

• One-click auth setup with routes
• OTP implementation available
• Installs all required dependencies

For detailed usage instructions and advanced features, visit the complete documentation

Install OTP Into Remix w/ Auth Routes

For detailed usage instructions and advanced features, visit the complete documentation

Create Tests for Routes and Actions In Remix-Run

• Creates comprehensive test files in routes/tests/
• Auto-generates tests for all prismaexport functions
• Includes parameter type validation

For detailed usage instructions and advanced features, visit the complete documentation

React-Router

For detailed usage instructions and advanced features, visit the complete documentation

Convert Remix Run to X Platform

For detailed usage instructions and advanced features, visit the complete documentation

VSCode Color Theme Builder

• Theme Application Options
• Preset Themes: Apply professional designs in <15s
• Quick Customization: Modify core colors in <5min
• Full Palette: Comprehensive color selection
• Manual Control: Fine-tune every element
• Export & Save Options
• Tailwind Export: Generate CSS classes for projects
• VSCode Copy: Export theme to clipboard
• Workspace Save: Auto-saves to .vscode/settings.json
• Global Save: Applies across all workspaces

For detailed usage instructions and advanced features, visit the complete documentation

Blacked Out

• Minimalist all-black theme
• Reduces eye strain on large monitors
• Mutes distracting UI elements
• Preserves code readability

For detailed usage instructions and advanced features, visit the complete documentation

Window Differentiator

• Color-codes workspace windows
• Subtle visual indicators
• Preserves your preferred theme
• Random color selection from curated palette

For detailed usage instructions and advanced features, visit the complete documentation

Reset - Window Differentiator

For detailed usage instructions and advanced features, visit the complete documentation

Add ShadCN Components To Your Project

• Component Management
• Right-click to add components
• One-click full installation
• Includes all dependencies

For detailed usage instructions and advanced features, visit the complete documentation

Install ShadCN Components w/All Components

For detailed usage instructions and advanced features, visit the complete documentation

GitHub Repo Management

• Auto Commit & Push: Stages, commits, and pushes changes with automatic messages
• Version Control: Auto-upgrades patch version and pushes to GitHub
• VSIX Management: Creates, reveals, and installs VSIX packages with one click
• "Yeet" Command: Complete workflow (save → commit → version → build → publish)

For detailed usage instructions and advanced features, visit the complete documentation

Open Repo in Browser

• Right-click → "Open GitHub Repo in Browser"
• Direct access to repository from any file

For detailed usage instructions and advanced features, visit the complete documentation

Open GitHub Repo At File

• this is NOT replacing the original variant
• instead of just opening your repo in the browser, it will navigate to the file within the repo from where you activated this function
• I use this, way more than I thought I would. But it triggers me every time I use it, then having to still navigate to the file from where I activated the function. Some code bases, we all know how easy it is to get around. But if it's a larger code base with github's annoying nuances within the sidebar nav... fuck that... I know, talk about first world coding problems, but still triggers me when it shouldn't obviously this extension pampers you
• it should reside right underneath the original variant for easy access
• sigh, the dev host is bugging out not allowing me to test... fuck, well... when in doubt, yeet, I guess
• Borat voice: "Yeet was great success!"

For detailed usage instructions and advanced features, visit the complete documentation

Create include object

For detailed usage instructions and advanced features, visit the complete documentation

Create action object

For detailed usage instructions and advanced features, visit the complete documentation

Click To Schema Object

• Right-click model name → "Open Schema Object"
• Jumps directly to schema definition

For detailed usage instructions and advanced features, visit the complete documentation

Generate Crud Resolvers / Rest End Points

• Automatic resolver/REST endpoint creation
• Hover preview before generation
• Right-click → Prisma submenu → "CRUD"

For detailed usage instructions and advanced features, visit the complete documentation

VSCode Extension Management For Devs

For detailed usage instructions and advanced features, visit the complete documentation

File Nesting

For detailed usage instructions and advanced features, visit the complete documentation

Reveal In Explorer

• Reveal in Explorer: Right-click in extensions pane

For detailed usage instructions and advanced features, visit the complete documentation

Copy Path

• Copy Path: Right-click in extensions pane

For detailed usage instructions and advanced features, visit the complete documentation

Bookmarks

• Line-specific markers
• Stores up to 20 bookmarks
• Status bar access

For detailed usage instructions and advanced features, visit the complete documentation

Extension Produced Messages

For detailed usage instructions and advanced features, visit the complete documentation

Search Bar

• Search Bar
• Title bar button for instant access
• Workspace-scoped quick searching
• Config file: .vscode/ocrmnavigator/search-config.json

For detailed usage instructions and advanced features, visit the complete documentation

Clipboard History Pro

• Last 20 clipboard items
• Hover previews
• Status bar access

For detailed usage instructions and advanced features, visit the complete documentation

Color Wheel

• ShadCN-inspired picker
• HEX/OKLCH/CSS values
• Copy with/without hashtag

For detailed usage instructions and advanced features, visit the complete documentation

Lucide Icons

• Fuzzy search across libraries
• JSX/TSX component generation
• Instant clipboard copy
• Pagination and sizing controls

For detailed usage instructions and advanced features, visit the complete documentation

Tailwind Converter

For detailed usage instructions and advanced features, visit the complete documentation

Notes, To-Dos and Things

• Universal Access
• VSCode extension
• Mobile app (PWA)
• Web interface
• GitHub sync
• Key Features
• Priority-based organization
• Offline editing with smart sync
• Team collaboration
• Reminder notifications

For detailed usage instructions and advanced features, visit the complete documentation

Mobile App - Notes, To-Dos and Things

For detailed usage instructions and advanced features, visit the complete documentation

Superuser Task Runner

Phased Out! Functionality was replaced by improved featureset within devstack

• technically completely phased out from its original idea as the entire code base has now been fully merged into devstack but will leave this here for anyone that wants to read it

For detailed usage instructions and advanced features, visit the complete documentation

Share Config With Friends

• Export your setup to shareWithFriends folder
• Includes README with setup instructions
• Manual cleanup recommended for sensitive data

For detailed usage instructions and advanced features, visit the complete documentation

Default Apps Configuration

• Control which features are active
• Accessible via extension settings
• Detailed explanations for each option

For detailed usage instructions and advanced features, visit the complete documentation

View Config Example

For detailed usage instructions and advanced features, visit the complete documentation

Dev Region

• 'X' button on title bar folds all in active editor
• usage:
  • "// #dev"
  • "//#dev"
  • "// #dev commment"
  • "//#dev commment"
  • "// #enddev"
  • "//#enddev"

For detailed usage instructions and advanced features, visit the complete documentation.

Left Off Note

• Accessible in the context menu
• select Open Leftoff Note

For detailed usage instructions and advanced features, visit the complete documentation.

Shortcuts

• Task, Notes and Things Quick Pick: Alt + Shift + T
• Context Snippets: Alt + Shift + S
• Clipboard++ History: Alt + Shift + C
• Show Bookmarks: Alt + Shift + B
• DevStack Quick Pick: Alt + Shift + D
• Open UI Dashboard: Alt + Shift + A
• Errors Plus: Alt + Shift + E
• Show Error History: Alt + Shift + H

For comprehensive details on each shortcut's functionality, visit the complete documentation.

Create Export Index

• right click on folder
• creates an index file in that folder
• recursively export *'s each file within that folder to tidy up import statements

For detailed usage instructions and advanced features, visit the complete documentation

Find Errors and Missing Imports

• editor context menu
• select find errors and missing imports

For detailed usage instructions and advanced features, visit the complete documentation.

MD Viewer Renderer

• in the editor context menu
• in the devstack submenu
• select render md

For detailed usage instructions and advanced features, visit the complete documentation.

Editor Context Updates

Menu Reorganization

The context menu has undergone significant restructuring to address usability concerns. As the menu had expanded to occupy the entire screen height (and beyond), strategic reorganization became necessary. After extensive usage analysis, less frequently accessed items have been strategically relocated to submenus while preserving quick access to essential functionality.

Key Changes:

• 'Remix' Submenu → 'Special Functionality'

  • Relocated within the 'Remix' parent menu (formerly 'Remix Components')
  • Positioned as the first item in the context menu for optimal accessibility

• 'Open Object in Schema'

  • Migrated to the 'Prisma' submenu for improved categorization

• 'Snippets' Submenu Consolidation

  • Submenu structure removed for streamlined navigation
  • All snippet items integrated into the top of the 'DevStack' submenu

Documentation Enhancements

Comprehensive documentation improvements have been implemented based on structural analysis and user feedback:

Content Organization

• Section Restructuring: Previously grouped similar functions have been separated into dedicated sections for improved clarity and navigation
• Standardized Coding: All sections now utilize identical underlying code structure, ensuring consistent behavior and maintenance
• Uniform Styling: Visual consistency maintained across all documentation sections

Navigation Improvements

• Modern Sidebar: Transitioned to the site's default inset-style sidebar for enhanced visual integration
• Dynamic Highlighting: Sidebar items automatically highlight corresponding to current scroll position, providing intuitive navigation feedback
• Synchronized Scrolling: Sidebar maintains visibility of current section through intelligent "ghost scrolling" functionality
• Direct Navigation: All README links provide direct navigation to corresponding documentation sections
• Sticky Section Headers: Section titles remain fixed at the top of the viewport during scrolling, with seamless transitions between sections

Technical Optimizations

• URL Structure: Documentation URLs relocated outside parent routes to accommodate enhanced sidebar functionality
• Performance: Optimized scrolling detection and highlighting algorithms for smooth user experience

Development Philosophy & User Experience

This represents the final major structural revision for the extension. Throughout the development process, various challenges have been identified and addressed at different stages of growth.

Current Challenge Resolution

The most recent optimization addressed a critical user experience issue: documentation overwhelm for new users. The challenge involved presenting essential information accessibly while maintaining feature discoverability for existing users.

The Problem:

• Extensive documentation intimidated new users despite modular feature design
• New feature additions risked invisibility due to documentation length
• No comparable extensions existed to provide established patterns for documentation structure

The Solution:

• Overview-Focused README: Provides comprehensive feature overview without overwhelming detail
• Modular Approach: Emphasizes that features operate independently and can be selectively enabled/disabled
• Bookmark System: Strategic placement of update notifications ensures existing users discover new functionality immediately upon accessing documentation

This approach balances accessibility for newcomers with feature discoverability for existing users, creating an optimal documentation experience for all user segments.

Catalyst UI

• Accessible in the context menu
• under catalyst ui
• select a category via submenu
• once a component is selected it inserts at cursor

For detailed usage instructions and advanced features, visit the complete documentation.

Remix

Background and Context

The Remix framework has undergone significant and confusing transitions that have created uncertainty, atleast for me to say the least. During an attempted project creation session, the platform displayed closure notifications directing users to migrate to React Router, which prompted the creation of create-remixv2 as a community resource that has since gained substantial adoption.

This announcement had immediate community impact, with several stack creators removing Remix-based repositories on the same day. However, the situation became more perplexing when v3 appeared in the official repository without corresponding announcements, documentation, or the standard parallel documentation versioning that accompanied previous releases.

Documentation and Communication Concerns

The absence of v3 documentation represents a departure from established patterns. Previous versions (v1 and v2) maintained concurrent documentation availability, allowing developers to reference version-specific information during transitions. The current lack of v3 documentation, combined with inconsistent communication, creates significant uncertainty for production applications.

Archive Purpose and Availability

Given the platform's management inconsistencies and potential for sudden changes, maintaining access to stable framework versions has become a practical necessity. Two larger production projects continue to rely on v1 and v2 implementations, making source code availability critical for ongoing maintenance and potential emergency fixes.

Available Versions

A comprehensive mono-repository will be established on GitHub containing the following preserved versions:

• 1.6.2
• 1.6.3
• 1.6.4
• 2.3.0 (approximate version)
• create-remix-1.9.0

Community Resource Philosophy

This archive serves as both an insurance policy against potential repository removal and a community resource. The extension's established pattern of providing assistance extends to preserving access to stable development tools, ensuring continuity for existing projects regardless of framework management decisions.

Platform Management Assessment

While Remix represents an excellent technical platform, its management approach has created significant concerns regarding:

• Communication Consistency: Mixed messages about platform continuity
• Documentation Standards: Departure from established documentation practices
• Release Management: Unclear versioning and announcement processes
• Long-term Stability: Uncertainty about commitment to existing user base

These factors collectively suggest a project management approach that prioritizes development over community stability, creating challenges for production application planning.

Forward-Looking Considerations

The archive exists to provide stability regardless of future platform decisions. Whether Remix continues development, announces closure, or experiences further management changes, preserved versions ensure existing projects maintain access to their foundational dependencies.

---

Note: This section represents developer advocacy and resource preservation rather than official extension documentation. It reflects the extension's commitment to supporting the development community through uncertainty and transitions.

Update

UPDATE: My sincere apologies for the recent disruption to the platform. After implementing a new feature and migrating to a different development framework, I discovered that the site had encountered critical issues. The platform migration was necessitated by Vite's inadequate error reporting capabilities, which became increasingly problematic as the codebase expanded. While this limitation might be manageable for smaller projects, the current scale of the platform—with its extensive component library—made debugging virtually impossible without proper diagnostic feedback. I want to assure users that this transition is entirely backend-focused; the user experience remains unchanged, and no action is required on your part to continue using the platform effectively. The newly introduced feature is a comprehensive UI component library offering both free and premium tiers. The premium subscription provides access to the complete collection of 1,019+ components and will be available shortly as I finalize the remaining platform optimizations. To foster community engagement and reward contributions, I'm implementing an incentive program: contributors will receive complimentary premium access—one month for each accepted component submission. For example, ten approved submissions would result in ten months of credited premium access, along with crediting the author on the components page. I remain committed to continuous improvement across all aspects of this platform and encourage community participation in expanding the component library. While submission requirements are minimal, I may make changes to enhance contributions before publication. Given the technical challenges of manually reviewing over 1,000 components plus additional platform files without adequate error diagnostics, this migration was essential for maintaining service reliability. I appreciate your understanding and can confidently state that the new infrastructure will prevent similar disruptions in the future.

Issues and Bugs

• open remix-run route in browser

  • need to fix it index files
  • currently wants to open url/index instead of just url

• docs

  • verify toggle hidden is included in the docs

• hidden features

  • enable hidden features for all users
    • visualize schema objects
      • need to create a smaller schema to try and test this before enabling, this has been in the codebase for atleast 4 months now
  • before you try, dont waste your time and go looking for these, you wont find them and even if you do you wont be able to use them as each of these features first checks to see who is logged into the vscode instance, which means they are locked for my use and my use only. A lot of them you wouldn't want anyways, but this is how I try weirder functionality or functionality that I beleive will be nothing but a headache or produce a lot of errors.
  • great example, visualize schema objects... vscode did NOT like running that at all haha. Mind you the two projects I tested, and wanted it for had massive schemas. Sooo, I either need to start from scratch but first need to check to see if this is even possible for larger schemas, which thats the only time you would want to use something like that to begin with. Trying other extensions that have the same functionality... has never worked in the projects I want to use them in so I might just trash that....orrrr.... didnt have it at the time I coded it, but... when in doubt, just throw it in the browser. Thats actually a good idea, I've never seen another extension try that, because they all use the same shitty vscode browser engine. At the same time this would also open up a plethora of libraries to render it in. im just adding more work to my already growing stack
  • BUT if you are an author of an extension and want to try something in your own extension for a period of time, its very easy to set up enabling only you to access and use it. Even things like context menu items and submenus, right from the package.json and / or the vscode command declaration

Given the extensive scope of this extension—which consolidates functionality from over 70+ individual extensions, many containing multiple features—comprehensive testing of every component becomes increasingly challenging alongside my concurrent personal and client projects. Until I can implement automated testing suites for each module, I encourage users to report any issues they encounter.

When submitting bug reports, please provide detailed information including:

• Specific steps to reproduce the issue
• Screenshots or screen recordings when possible
• System specifications and browser version
• Any console error messages

The more comprehensive the information provided, the more efficiently I can diagnose and resolve issues. My contact information is available on my GitHub profile for direct communication regarding any problems you may experience. Your feedback is invaluable in maintaining the quality and reliability of this platform, and I appreciate your patience as we continue to refine and optimize the user experience.