Skip to content

Publishing to Marketplace

Nam Anh edited this page Sep 4, 2022 · 1 revision

Overview

In order for your creation to be visible in Marketplace, you'll need to make a public GitHub repository that meets these requirements (with the exception of Snippets):

  • Contains its respective GitHub topic tag listed below:
Type Tag
Extension spicetify-extensions
Theme spicetify-themes
Custom Apps spicetify-apps
  • Have a valid manifest.json in the root folder (format outlined below)

Manifests

Here are the templates of a valid manifest.json that you can use for your creation.

Extension

Key Description Optional
name Your extension name
description Description for your extension
preview A path to your preview image. Must be relative to your project root.
main The filename for your extension's main .js file. Must be relative to your project root.
readme The filename for your extension's README file. Must be relative to your project root.
branch Specific branch used for publication. Will use default branch if not present.
authors Array of authors with names and URLs. Will use repo owner if not present.
tags Array of tags to show along with the card.

Example:

[
  {
    "name": "Spicetify-Hide-Podcasts",
    "description": "Spicetify extension to hide podcasts.",
    "preview": "screenshot.png",
    "main": "hidePodcasts.js",
    "readme": "README.md",
    "authors": [
        { "name": "theRealPadster", "url": "https://github.com/theRealPadster" }
    ],
    "tags": ["podcasts"]
  },
  {
    "name": "extensionName(No .js included)",
    "description": "Another Spicetify extension to show how to make a manifest.",
    "preview": "https://i.imgur.com/foo.png",
    "main": "filepathFromGitRepo/myExt.js",
    "readme": "filepathFromGitRepo/README.md",
    "branch": "my-branch"
  },
]

Theme

Key Description Optional
name Your theme name
description Description for your theme
preview A path to your preview image. Must be relative to your project root.
usercss A path to your user.css file. Must be relative to your project root.
schemes A path to your color.ini file. Must be relative to your project root.
include Array of extension URLs* that is needed to be included with the theme.
readme The filename for your theme's README file. Must be relative to your project root.
branch Specific branch used for publication. Will use default branch if not present.
authors Array of authors with names and URLs. Will use repo owner if not present.
tags Array of tags to show along with the card.

*: GitHub RAW links will not work, use GitHub Pages URL if you must.

Example:

{
    "name": "Theme Name",
    "description": "Theme description",
    "preview": "filepathFromGitRepo/theme.png",
    "readme": "README.md",
    "usercss": "filepathFromGitRepo/user.css",
    "schemes": "filepathFromGitRepo/color.ini",
    "include": ["https://your-github-username.github.io/your-repo/filepathFromGitRepo/extension.js"],
    "branch": "beta-release",
    "authors": [
        { "name": "theRealPadster", "url": "https://github.com/theRealPadster" },
        { "name": "CharlieS1103", "url": "https://github.com/CharlieS1103" }
    ],
    "tags": ["dark", "minimal"]
}

Custom App

Key Description Optional
name Your custom app name
description Description for your custom app
preview A path to your preview image. Must be relative to your project root.
readme The filename for your custom app's README file. Must be relative to your project root.
branch Specific branch used for publication. Will use default branch if not present.
authors Array of authors with names and URLs. Will use repo owner if not present.
tags Array of tags to show along with the card.

Example:

{
    "name": "App Name",
    "description": "App description",
    "preview": "filepathFromGitRepo/theme.png",
    "readme": "README.md",
    "branch": "beta-release",
    "authors": [
        { "name": "theRealPadster", "url": "https://github.com/theRealPadster" },
        { "name": "CharlieS1103", "url": "https://github.com/CharlieS1103" }
    ],
    "tags": ["game", "beta"]
}

Further manifest notes

  • If you have multiple extensions in the same repo (such as using subfolders), you can make your manifest.json an array, and include them all.
  • Most fields also support http/https URLs (preview, main, readme, usercss, schemes)
  • If all your extensions/themes are in the root folder, you don't need to include an absolute file path.

Snippets

CSS snippets are rather easy to implement. We fetch them from this repo, so you'll need to submit a pull request. Once you have your code segment ready, edit snippets.ts and add the following, then make your PR.

Key Description
title Your snippet name
description Description for your snippet
code Your CSS snippet code. Needs to be in a single line. Can use this website
preview Preview image of the snippet. Must be a transparent PNG with a 1:1 ratio. Can use a URL or a relative link of this repository stored at resources/assets (recommended)
{
    "title": "Title",
    "description": "description",
    "code": "The single line css you have",
    "preview": "Preview image of the snippet"
}