Skip to content

VS Code Explorer Quick Tour

Summary

This page gives a fast, visual introduction to the SkyCMS Explorer extension inside Visual Studio Code.

Use it when you want to understand what "CMS as code" looks like in practice before reading deeper setup documentation.

Where this fits in your team workflow

Use VS Code Explorer when:

  • developers need IDE-first control of SkyCMS-managed resources,
  • teams want source-control friendly workflows,
  • structure and technical content updates are being made.

Use CKEditor when:

  • non-technical content creators are performing routine page and blog updates,
  • the task is writing and formatting content rather than structural implementation.

Most teams use both.

Quick tour steps

1. Connect a SkyCMS site

Add the site profile and sign in from VS Code commands.

2. Open the SkyCMS tree

Browse layouts, templates, articles, and files from the Explorer panel.

3. Edit fields and files

Open CMS content fields and site files in editor tabs, save like normal VS Code documents.

4. Preview and publish

Use context actions for preview, publish, and unpublish where supported.

Visual reference

When your screenshot is ready, place it here:

  • getting-started/img/vscode-explorer-quick-tour.png

Then this page will render it automatically:

SkyCMS VS Code Explorer quick tour screenshot

What to look for in the screenshot

  • SkyCMS Explorer panel with a connected site.
  • Category nodes such as Layouts, Page Templates, Articles, and Files.
  • An open field/file tab in the VS Code editor area.
  • Context menu actions or command palette entries for SkyCMS tasks.