Build WordPress FSE Gutenberg Websites from an IDE with code in files and folders
Skylit.DEV brings WordPress to the File System
Skylit.DEV creates a bidirectional live sync between your development folder, Gutenberg, and the WordPress database. Build WordPress websites as structured files while everything stays instantly synchronized.
Join Early AccessWork directly with WordPress structures from your IDE.
Posts, templates, patterns, ACF and hybrid blocks, CPTs, field schemas, and data live as structured files. Everything remains editable in Gutenberg and synchronized with the database.
Turn WordPress into a structured, AI-ready file system.
Clean, structured tree, HTML, CSS, JS, PHP, predictable JSON attributes, structured backend logic, and a defined architecture. Skills.md defines capabilities, enabling reliable understanding and safe modification.
What Skylit.DEV Brings to Your Workflow
Code-first Gutenberg
Write clean HTML and CSS in your dev folder. Skylit compiles it into real Gutenberg blocks; classes, IDs, attributes, and hierarchy stay intact.
Architecture, CPTs & fields
Define custom post types, field schemas, and relationships in your file system. Skylit syncs architecture into the database, no admin-only configuration.
Hybrid blocks & patterns
Convert HTML into reusable patterns with controlled block interfaces. Devs own structure and logic; editors work inside predefined zones.
Loops & dynamic output
Build CPT loops, archive grids, and related content from files using a structured JSON layer in HTML guided by the Expression Engine without scattering template logic.
Write & sync content from files
Author post content and structure in HTML files. Skylit syncs into the database and Gutenberg instantly as your content lives as both code and editable blocks.
Native local media
Your local media-library/ folder is the WordPress Media Library, including folder structure. Drop assets in the project; Skylit syncs, links, and keeps folders aligned with no manual uploads.
Structured by design
A Git-versionable, AI-ready WP architecture
Everything in your WordPress project becomes part of a structured codebase: layouts, styling, CPT definitions, field schemas, block structures, post data with pattern instances, and media assets.
The token reality
Instead of parsing complete Gutenberg output, huge database tables, and mixed theme logic, AI operates on clearly defined layouts, structured data schemas, reusable block systems, consistent file patterns, and core web languages it already understands best.
Because the system is predictable, AI does not need to query MCP to interpret your project first. It understands it immediately from file system: smaller context windows, fewer tokens wasted on guesswork.
The Skylit.DEV approach
Skylit.DEV provides a defined internal structure and default skillset: how blocks compose, how data connects to layouts, how loops render, how styles and logic stay organized, and which expressions exist in your environment. Devs and AI can build their own project memory, steering models following the instructions persistantly.
Result: faster understanding of complex codebases, safer edits to layouts and data, consistent generation of new components, and fewer errors from misreading WordPress structure.
You are no longer asking AI to work around a CMS. You are giving it a compressed, focused WordPress CMS in file-system it can operate on with precision.
Under the hood
The Technology Behind Skylit.DEV
Compiler engines plus plugin utilities: Media Library folders, maintenance, caching, conditions, and CSS, JS, and PHP as files.
HTML to Gutenberg Compiler
Transforms clean HTML into editable block structures while preserving hierarchy, attributes, and layout.
CSS Rendering Pipeline
Applies your development CSS directly inside Gutenberg and frontend with consistent output and no duplicate styling layers.
Pattern Conversion Engine
Converts HTML sections into reusable patterns and repeatable layout systems.
Hybrid Block System
Connects patterns to controlled block interfaces with editable areas and defined structure.
Loop Engine
Builds dynamic content sections, including CPT loops, archives, and related content.
Expression Engine
Adds conditional logic, dynamic rendering, and data-aware output directly to layouts.
Bidirectional Sync Layer
Keeps your file system, Gutenberg, and database aligned with accurate metadata mapping and block identity tracking.
Media Library Folders
A folder tree in the Media Library and media modal that mirrors your local media-library/ folders. Create, move, and filter attachments with Git-friendly structure.
Caching & Optimization
HTML page cache, CSS and JS bundles, Google Fonts optimization, delayed scripts, and CDN-aware purges so the front end stays fast after you ship.
Maintenance Mode
A branded visitor 503 you control from the IDE or admin bar. Editors keep working while the public site stays closed.
Conditions & Block Options
Show, hide, or modify blocks from field values and expressions. Toggle instance parts without duplicating patterns.
CSS, JS & PHP from files
Global and block CSS, front-end JS, and PHP hooks live as project files. The plugin loads them; Gutenberg stays the editing surface.
In the editor
Skylit.DEV in the Block Editor
Gutenberg stays Gutenberg. Skylit.DEV adds a dev-grade surface: jump between blocks and files, edit structure and logic in place, and control how each CPT is edited.
Deep IDE integration
Select a block in Gutenberg and open its source in your IDE. Navigate from code back to the exact block instance in the editor.
Enhanced editing environment
Custom block attributes and inspector control over loops, expressions, conditions, and options, without leaving Gutenberg.
Layout & workflow control
Adjustable UI chrome for precision work, direct title and slug editing, clearer navigation in deep nesting, and canvas width with zoom.
Templating & per-CPT modes
Define how the editor behaves globally or per CPT: how content renders and is edited in Gutenberg: mix flexible pages, locked layouts, and data models in one system.
Dark mode in the editor
Light, dark, or system UI in Gutenberg so long editing sessions stay readable without fighting the default WordPress chrome.
Access to code files
Open HTML, CSS, JS, and PHP from the block editor. Jump from a selected block to its source file, then back to the exact instance in Gutenberg.
DEV Code and WP Editor.Fully Synchronized.
Skylit.DEV does not replace Gutenberg.
It turns it into a synchronized development interface.
Everything built in your IDE remains fully accessible and editable inside WordPress.
Who Skylit.DEV is for
Built for Developers Who Need Control
- Building custom themes and systems
- Working with CPT-driven architectures
- Using patterns, loops, and reusable layouts
- Using AI without giving up ownership
The foundation
AI Will Keep Changing. Your Project Foundation Should Not.
AI tools, models, and interfaces will continue to evolve. Your project still needs a stable source of truth underneath them: structured, readable, versionable files that both developers and AI can understand.
Where Control Breaks Down
When a WordPress project exists mainly across the database, admin screens, generated block markup, and remote tool calls, every change becomes harder to inspect.
AI may be able to make the change, but developers are left with limited visibility, unclear diffs, fragmented history, and errors that can quietly carry into the next instruction.
The Skylit.DEV Path
Skylit.DEV brings WordPress structures into a clear project folder and keeps them synchronized with Gutenberg and the database.
Templates, patterns, content, CPT definitions, field schemas, assets, CSS, JavaScript, and PHP become readable files that can be edited directly, reviewed before deployment, tracked in Git, and safely modified by AI.
Inspectable source
See, read, and edit the actual structure behind the website, with or without AI.
Real Git history
Meaningful diffs, branches, and rollbacks instead of hidden database changes you cannot review.
Structured AI context
Predictable folders, schemas, conventions, and project skills help AI understand what it is changing before it changes it.
Connected Gutenberg
Developers work from the IDE while editors keep working inside the familiar WordPress interface.
Portable ownership
Your project stays readable, adaptable, and independent of any single model, editor, agent, or AI protocol.
Surgical edits
Small, reviewable changes on real files. One mistake does not cascade into the next, and you can reverse course quickly.
We are building human AI collaboration around code you still own: readable, portable, and ready for whatever comes next.
Join Early Access
We are opening Skylit.DEV to a limited number of developers and agencies. Request access to work inside the full synchronized system: compiler, Gutenberg utilities, caching, and maintenance included.