GistPad is a Visual Studio Code extension that allows you to manage GitHub Gists entirely within the editor. You can open, create, delete, fork, star and clone gists, and then seamlessly begin editing files as if they were local. It's like your very own developer library for building and referencing code snippets, commonly used config, programming-related notes/documentation, and interactive samples. Additionally, you can collaborate with your friends and colleagues by "following" them, so that you can access/browse/fork and comment on their gists, without ever leaving Visual Studio Code 🚀
Install this extension from the marketplace and then reload VS Code
Linux Users: Ensure you have the
libsecret packages installed as well. These will enable GistPad to read/write your GitHub auth token securely.
GitHub Enterprise users: Set the
gistpad.apiUrl setting to point at the API URL of your GitHub server instance (e.g.
GistPad tab (look for the notebook icon in the activity bar). From there, you can open a Gist by ID/URL, or sign-in in with a GitHub token, in order to view/edit/create/delete/fork/clone your own gists. To sign-in, you can generate an auth token by visiting this page, giving the token a name (e.g.
gistpad), and ensuring to check the
Git+HTTPS Users: If you've already signed-in to
github.com with the
git CLI, GistPad will attempt to provide "single-sign on", assuming you're using HTTPS-based auth, and your login session includes the
gist scope (SSH-based auth isn't supported).
Create new gist by clicking the
+ icon in the
Gists toolbar and specifying the files to seed it with (including support for directories!). Additionally, you can create gists from local files or snippets, by right-clicking them in the
Explorer tree, or right-clicking an editor window/tab, and selecting
Copy File to Gist,
Add Selection to Gist or
Paste Gist File Contents (details)
View and reply to comments in a Gist by scrolling to the bottom of a Gist file and interacting with the thread (including embedded code snippets!)
Stay up-to-date with your friend's and colleague's Gists by following them via the
GistPad: Follow User command
If you're working on a web app, and want to create runnable code samples, right-click the
Your Gists node and select
New Playground (or
Files and Directories
When you create a gist via the
New Gist (or
New Secret Gist) command, you can specify a comma-seperated list of file names to seed the gist with. Furthermore, you could add
/ to your filenames, in order to add them to a sub-directory within the gist. For example, if you create a new gist, and specify
todos/personal.txt,todos/work.txt,reminders.txt, the gist will include a
reminders.txt file at the root of the gist, and
reminders.txt files within a new directory called
At any time, you can add new files to a gist or directory by right-clicking them and selecting
Add New File(s) or
Upload File(s). You can also rename/delete directories as well, by right-clicking them in the tree and selecting the appropriate command. If you'd like to move a file from one directory to another, simply right-click the file, select
Rename File and edit the directory name that it's in. It's that simple!
Gist comments are exposed within the editor at the bottom of any opened Gist files. If a Gist includes multiple files, then the comment thread will be displayed at the bottom of them all (duplicated and synchronized).
If you're not authenticated, you can view existing comments, but you can't reply to them. If you are authenticated, you can add/reply, as well as edit/delete your own comments. In order to control the behavior of how Gist comment threads are displayed, refer to the
GistPad > Comments: Show Thread config setting.
In order to make it easy to author markdown and HTML/Pug files that include image assets, you can copy images into your clipboard (e.g. taking a screenshot, clicking
Copy Image in your browser, etc.) and then paste them directly into a gist file by right-clicking the editor and selecting
Paste Image, or using one of the following keyboard shortcuts:
ctrl + shift + v (Windows/Linux),
cmd + shift + v (macOS).
By default, when you paste an image into a Gist file, it's uploaded as a
.png to the gist, and the appropriate reference is added to it from the document (e.g. inserting an
<img />). However, this behavior can be changed by using the
GistPad > Images: Paste Format and/or
GistPad > Images: Paste Type settings. Refer to the config settings section below for more details.
By default, when you paste an image, it is uploaded to a directory called
images within the gist. However, if you'd like to change this (e.g. to
assets instead), you can set the
GistPad > Images: Directory Name setting.
GitHub Gists already allows you to star other user's gists, and when you do that, those will appear in the
Gists tree, underneath a
Starred Gists node. However, if you want to follow a GitHub user, and easily browse all of their current and future gists (without having to star each one!), you can run the
GistPad: Follow User command and specify their GitHub user name. Once you've done that, you'll see a new node in the
Gists tree which displays all of their public gists, and allows you to open/fork/clone/star them just like any other gist.
Your Gists node and select
New Playground or
Since the playground is backed by a Gist, your changes are saved and shareable with your friends. Additionally, as you find other playgrounds that you'd like to use, simply fork them and create your own playgrounds. That way, you can use Gists as "templates" for playground environments, and collaborate on them with others just like you would any other gist. When you're done with a playground, simply close the preview window and all other documents will be automatically closed. If you no longer need the playground, then delete it just like any other gist 👍
When you open a playground, this activates the "playground toolbar", which is a collection of helpful utilities that are displayed in the editor's title bar. The following describes the available actions:
- Open Console - Opens the
GistPad Playground console, which allows you to view the output of any
console.log calls that your playground makes (details).
- Change Layout - Allows you to change the layout configuration of the playground editors (details).
- Add Library - Allows you to add an external library to your playground (e.g. React.js, Font-Awesome) (details)
You can reference HTTP-based images within any of your playground files, and they'll be downloaded/rendered automatically. However, if you need to add local images to your playground, you can upload them in one of two ways:
Right-click the gist in the
Gists view and select
Upload Files(s). This supports any file type, and therefore is the most general-purpose solution. Once the image is uploaded, you can then reference it from your playground using only its filename (e.g.
<img src="myImage.png" />), since the playground preview understands the context of the "surrounding gist".
Copy/paste an image into your clipboard, open up an HTML or Pug file, right-click the editor and select
Paste Image. This will transparently upload the image to the gist, and then insert a reference to it for you (e.g. adding an
<img /> tag). This solution works best when you want to paste a "transient" image into your playground, such as a captured screenshot, or an image that you copied from a webpage.
Additional Language Support
- SCSS/Sass - Rename the
style.css file to
style.sass. *Note: While VS Code ships with language support for SCSS out-of-the-box, it doesn't ship support for Sass (the "indentended" syntax). So if you plan to author playgrounds with that syntax, it's recommended that you install this extension along with GistPad.
- Less - Rename the
style.css file to
- Markdown - Rename the
index.html file to
- Pug - Rename the
index.html file to
- TypeScript - Rename the
script.js file to
script.tsx, in order to use JSX in your code)
- JSX - Rename the
script.js file to
react library to your gist's
playground.json file, then
*.js files can also include JSX.
If you'd like to always use one of these languages, then set one or more of the following settings, and all new playgrounds will include the right files by default:
GistPad > Playgrounds: Markup Language,
GistPad > Playgrounds: Script Language,
GistPad > Playgrounds: Stylesheet Language. View the settings documentation below for more detials.
react) or stylesheets (e.g.
font-awesome) to your playground, simply click the
Add Playground Library commmand in the playground "action bar" (or run
GistPad: Add Playground Library from the command palette). This will allow you to search for a library from CDNJS or paste a custom library URL. When you select a library, it will be automatically added to your playground.
Behind the scenes, this command update the playground's manifest file (
playground.json), which you can also open/edit yourself manually if you'd prefer. Additionally, since Gist files provide an internet-accessible URL, you can use Gists as re-usable snippets for playgrounds, and add references to them by right-clicking a gist file in the
Gists tree, select
Copy GitHub URL, and then adding it as a library reference to the appropriate playground.
By default, when you create a playground, it will open in a "Split Left" layout, which vertically stacks the code editors on the left, and allows the preview window to occupy the fully IDE height on the right. However, if you want to change the layout, you can run the
GistPad: Change Playout Layout command and select
Split Right, or
Additionally, if you create a playground, that looks best in a specific layout, you can set the
layout property in the playground's
playground.json file to either:
splitTop. Then, when you or someone else opens this playground, it will be opened with the specified layout, as opposed to the user's configured default layout.
The playground also provides an output window in order to view any logs written via the
console.log API. You can bring up the output window, as well as run the playground or open the Chrome Developer Tools, by clicking the respective command icon in the editor toolbar. If you'd like to always open the console when creating/opening playgrounds, you can set the
GistPad > Playgrounds: Show Console setting to
Additionally, if you create a playground that depends on the console, you can set the
showConsole property in the playground's
playground.json file to
true. Then, when you or someone else opens this playground, the console will be automatically opened, regardless whether the end-user has configured it to show by default.
If you'd like to give your playground an introduction, you can create a file in the playground called
README.markdown), and by default, it's contents will be rendered above the playground code in the preview window. When a playground is opened, the
README.md file isn't opened, which allows the playground to be focused on the core code assets (e.g.
script.js), and allow the preview window to include embedded documentation.
export, you can set the
scriptType property to
module in the playground's
playground.json file, and then begin to
import modules. To simplify the process of importing 3rd-party modules, we'd recommend using either Unkpkg (adding the
?module parameter to any URLs), or the Pika CDN.
If you'd like to create a playground, without persisting it as a gist, you can create a "temporary playground" by selecting the
Don't create gist button on the playground creation form (as opposed to giving it a description). You'll be able to edit, add, delete, and rename files just like a normal gist, but the changes are only kept in memory, and therefore, represent a great solution for exploring ideas quickly, and then moving on.
Note that temporary gists don't appear in the main
Gists explorer tree, and therefore, to manage files within a temporary gist, you need to use the
Active Gist tree on the
If you'd like to add a link in your gist/readme, which references a file and/or line/column within a file in the gist, simply add a hyperlink, whose
href value uses the
gist: scheme (kind of like a
mailto:), and specifies the file name you'd like to open (e.g.
gist:index.html). Optionally, you can specify a line and column number as well (e.g.
gist:index.html@23:5), which allows you to highlight a specific line/span of code when the end-user clicks on it.
By default, a playground represents a single interactive sample. However, they can also represent multi-step tutorials/presentations, by making two simple changes:
Specifying a tutorial title, by setting the
tutorial property in the playground's
Defining a series of steps as gist directories, whose name starts with the step number and includes an optional description (e.g.
1 - Discussion of text,
#1 - Intro). The contents of the directory match that of a standard playground (e.g. an
script.js file, etc.), and it's encouraged that each step have a readme that includes instructions. The number of steps in the tutorial is determined by the number of directories in the gist that follow the aforementioned pattern.
When a user opens up a tutorial playground, they'll only see the contents of the current step, and the preview window will include a navigation header that allows moving forward and backwards in the tutorial. Additionally, the user's current step will be persisted so that they can take a tutorial and pick up where they left off when they re-open the tutorial. To try an example, view the Learning MobX Tutorial.
When you create a new playground, you'll see a list of templates, which let you create playgrounds using a pre-defined set of files and external libraries (e.g. React.js, Vue). This makes it really easy to get started quickly, and reduce repetitive tasks/boilerplate. By default, GistPad includes a standard set of templates, which come from two built-in galleries:
web:libraries. If you don't intend to use one or both of these, you can disable them by clicking the gear icon when running the
New Playground (or
New Secret Playground) command, and de-selecting the galleries you don't want. Additionally, you can modify the
GistPad > Playgrounds: Template Galleries setting.
web:libraries gallery. Additionally, to see an example of a template, see the React.js template.
When defining the template, you can use the
In addition to using/creating template galleries, you can also mark your own local playgrounds gists as being templates, by simply setting
"template": true in the playground's
playground.json file. Then, when you create a new playground, you'll see your template in the list. This option is good for defining your own templates, that you don't intend to share with others.
Additionally, if you star a gist that is marked as a playground template, that will show up in the list of templates as well. That way, you can easily share templates with others, without needing to create a template gallery.
Whenever you create a playground, it includes a
playground.json file, which defines the metadata for the playground, including it's behavior, requirements and intended presentation.
Add Library command in the playground toolbar, and therefore, it isn't neccesary to manually edit it. Defaults to
styles - An array of URLs that indicate the CSS libraries which should be added to the playground when run. This property can be managed via the
Add Library command in the playground toolbar, and therefore, it isn't neccesary to manually edit it. Defaults to
showConsole - Specifies whether to automatically open the console when someone opens this playground. Note that this will take precendence over the user's configure console setting, and therefore, is useful when a playground relies on console output, and can ensure the playground is setup correctly without requiring the end-user to explicitly open the console.
layout - Specifies the layout to use when someone opens this playground. Note that this will take precedence over the user's configured default layout, and therefore, is useful when a playground is optimized for a specific layout, and therefore, can ensure the end-user has the best experience by default.
scriptType - Indicates the value of
type attribute, when injected into the playground preview page. Can either be
module. Defaults to
template - Indicates that this playground is intended to be used as a template for new playgrounds, and therefore, will appear in the list when creating a new playground. Defaults to
If you export a pen to a GitHub Gist, and then refresh the
Gists tree in VS Code, you'll be able to see the pen and then can open/edit it like any other playground. This allows you to easily fork someone's pen and work on it within VS Code.
Additionally, if you develop a playground locally, and want to export it to CodePen (e.g. in order to share it with the community), you can right-click the gist and select
Export to CodePen. This allows you to develop within VS Code, and then share it when you're done. When a playground is exported to CodePen, it's tagged with
gistpad so that the community can see the pens being created with it.
Bl.ocks is community for sharing interactive code samples/data visualizations, which are based on GitHub Gists. As a result, you can copy the URL for any Block, use it to open a gist within GistPad, and immediately have an interactive environment for viewing/exploring the Block.
Additionally, you can create new blocks with GistPad by adding the optional
Blocks gallery, and then creating a new playground using one of the block templates. From there you can edit HTML, use the included D3 library, upload data files (e.g. JSON, CSV, TSV) and watch the preview update in real-time. If you'd like to view/share the playground, you can right-click the gist and select
View Gist in Bl.ocks.
In addition to being able to use Gists to share code snippets/files, you can also use it as a mini-blog, thanks to integration with GistLog. In order to start blogging, simply run the
GistPad: New GistLog command, which will create a new Gist that includes two files:
blog.md file will be automatically opened for editing, and as soon as you're ready to publish your post, open
gistlog.yml and set the
published property to
true. Then, right-click your Gist and select the
Open Gist in GistLog menu. This will open your browser to the URL that you can share with others, in order to read your new post.
In addition to being able to view individual posts on GistLog, you can also open your entire feed by right-clicking the
Your Gists tree node and selecting the
Open Feed in GistLog menu item. This will launch your GistLog landing page that displays are published GistLog posts.
Contributed Commands (File Explorer)
In addition to the
Gists view, GistPad also contributes an
Copy File to Gist command to the context menu of the
Explorer file tree, which allows you to easily add local files to a new or existing Gist.
Contributed Commands (Editor)
In addition to the
Explorer file tree commands, GistPad also contributes the following commands to the editor's context menu:
Add Selection to Gist - Allows you to add a snippet/selection of code to a Gist, instead of the entire document
Paste Gist File - Allows you to paste the contents of a Gist file into the active document
Paste Image - Allows you to paste an image from your clipboard into a markdown, HTML or Pug file. The command will automatically upload the image and then add a reference to it.
Copy File to Gist command is also available on the editor tab's context menu.
Contributed Commands (Editor Title Bar)
In addition to the commands added to the editor context menu, GistPad also contributes the following commands to the editor's title bar menu (click the
... in the upper right section of an editor window):
Rename File - Allows you to rename the current file.
Contributed Commands (Command Palette)
In addition to the
Gists view, this extension also provides the following commands:
GistPad: Delete Gist - Allows you to delete one of your Gists. If you have a Gist workspace open, it will delete that and then close the folde
GistPad: Follow User - Follow another GitHub user, whuich allows you to browser/access/fork their Gists from within the
GistPad: Fork Gist - Forks the currently opened Gist, and then opens it as a virtual workspace.
GistPad: Open Gist - Displays your list of Gists (if you're signed in), and then opens the files for the selected one. You can also specify a gist by URL,
username/id, or ID, which doesn't require being signed in.
GistPad: Open Gist as Workspace - Same behavior as the
GistPad: Open Gist command, but will open the selected Gist as a workspace, istead of "loose files".
GistPad: New Gist - Creates a new public Gist, and then opens its associated files. If you'd like to seed the gist with multiple files, you can specify a comma-seperated list of names (e.g.
GistPad: New Secret Gist - Same behavior as the
GistPad: New Gist (Public) command, except that it creates a secret Gist.
GistPad: New Web Playground - Creates a new playground.
GistPad: New GistLog - Creates a GistLog.
GistPad: Refresh Gists - Refreshes the gist data and reloads the
GistPad: Sign In - Sign-in with a GitHub token, in order to view/edit/delete your Gists.
GistPad: Sign Out - Sign out of the currently authenticated GitHub session.
GistPad: Starred Gists - Lists your starred Gists, and then opens the files for the selected one.
Gistpad: Api Url - Specifies the GitHub API server to use. By default, this points at GitHub.com (
https://api.github.com), but if you're using GitHub Enterprise, then you need to set this to the v3 API URL of your GitHub server. This should be something like
Gistpad: Git SSO - Specifies whether to enable single sign-in (SSO) with the
git CLI, when you've already authenticated with github.com. Defaults to
Gistpad: Tree Icons - Specifies whether to show the gist type icons in the gists tree.
Gistpad > Images: Paste Format: Specifies the markup format to use when pasting an image into a gist file. Can be set to one of the following values:
markdown (default): Pastes the image reference using
Markdown format (e.g.
html: Pastes the image reference using
HTML format (e.g.
<img src="link" />). Note, when you paste an image into an HTML file, it will always use this format type, regardless what the setting is.
Gistpad > Images: Paste Type: Specifies the method to use when pasting an image into a gist file. Can be set to one of the following values:
file (default): The pasted image is uploaded as a
.png to the gist, and a reference is added to file it's pasted into.
base64: The pasted image is base64-encoded and then embedded into the gist file.
Gistpad > Images: Upload Directory Name: Specifies the name of the directory to upload images to. Defaults to
GistPad > Playgrounds: Auto Run - Specifies when to automatically run the code for a playground. Can be set to one of the following values:
onEdit (default): Will re-run the playground automatically as you type.
onSave: Will re-run the playground when you save a file.
never: Don't automatically re-run the playground, and instead, only run it when the
GistPad: Run Playground command is executed.
GistPad > Playgrounds: Auto Save - Specifies whether to automatically save your playground files (every 30s). If you've already set the
Files: Auto Save setting to
afterDelay, then that setting will be respected. Defaults to
GistPad > Playgrounds: Include Markup - Specifies whether to include a markup file (
index.html) when creating new web playgrounds. Defaults to
GistPad > Playgrounds: Include Script - Specifies whether to include a script file (
script.js) when creating new web playgrounds. Defaults to
GistPad > Playgrounds: Include Stylesheet - Specifies whether to include a stylesheet file (
style.css) when creating new web playgrounds. Defaults to
GistPad > Playgrounds: Layout - Specifies how to layout the editor windows when opening a playground. Can be set to one of the following values:
grid: Opens a 2x2 grid of editors, with the editors and preview window occupying an equal amount of space.
preview: Simply opens the full-screen preview window. This is useful for interacting with complex playgrounds or viewing other's playgrouds.
splitBottom: Opens a split-level layout, with the editors horizontally stacked on the bottom, and the preview occupying the full IDE width on the top.
splitLeft (default): Opens a split-level layout, with the editors vertically stacked on the left, and the preview occupying the full IDE height on the right.
splitLeftTabbed: Opens a split-level layout, with the editors grouped into a single tab on the left, and the preview occupying the full IDE height on the right.
splitRight: Opens a split-level layout, with the editors vertically stacked on the right, and the preview occupying the full IDE height on the left.
splitRightTabbed: Opens a split-level layout, with the editors grouped into a single tab on the right, and the preview occupying the full IDE height on the right.
splitTop: Opens a split-level layout, with the editors horizontally stacked on the top, and the preview occupying the full IDE width on the bottom.
GistPad > Playgrounds: Markup Language - Specifies the default markup language to use when creating new web playgrounds. Can be set to one of the following values:
html (default): Will result in an
index.html file being created whenever you create a new web playground.
markdown: Will result in an
index.md file being created whenever you create a new web playground.
pug: Will result in an
index.pug file being created whenever you create a new web playground.
GistPad > Playgrounds: Readme Behavior - Specifies how to display the contents of a playground's readme, if it has one. Can be set to one of the following values:
none: If a playground has a readme, then it won't be displayed automatically when someone opens it.
previewFooter: If a playground has a readme, then its contents will be rendered as the footer of the preview window.
previewHeader (default): If a playground has a readme, then its contents will be rendered as the header of the preview window.
GistPad > Playgrounds: Script Language - Specifies the default scripting language to use when creating new web playgrounds. Can be set to one of the following values:
script.js file being created whenever you create a new web playground.
script.jsx file being created whenever you create a new web playground.
typescript: Will result in an
script.ts file being created whenever you create a new web playground.
typescriptreact: Will result in an
script.tsx file being created whenever you create a new web playground.
GistPad > Playgrounds: Stylesheet Language - Specifies the default stylesheet language to use when creating new web playgrounds. Can be set to one of the following values:
css (default): Will result in an
style.css file being created whenever you create a new web playground.
less: Will result in an
style.less file being created whenever you create a new web playground.
sass: Will result in an
style.sass file being created whenever you create a new web playground.
scss: Will result in an
style.scss file being created whenever you create a new web playground.
GistPad > Playgrounds: Show Console - Specifies whether to always show the console when opening a playground. Defaults to
GistPad > Playgrounds: Template Galleries - Specifies the list of template galleries to use, when displaying the available templates when creating a new playground. Defaults to
Supported Filesystem Operations
Once you've opened a Gist, you can perform the following filesystem operations:
- Editing existing files
- Adding new files
- Renaming files
- Deleting files
- Copying/pasting files
GitHub Gist doesn't support directories, and therefore, this extension doesn't allow you to create them.
In order to improve the productivity of editing Gists, and make VS Code behave similarly to the GitHub.com experience, the following extensions are recommended, depending on how you expect to use Gists (e.g. markdown files, code snippets):
|Geo Data Viewer