Developers / Vanilla JS

Get Started with Vanilla JavaScript

This technology has no Slice Machine integration

This framework has no integration with Prismic's developer tool, Slice Machine. You can still build a Prismic website with this technology by using Prismic's Legacy Builder. However, if you're starting a new project with Prismic, we strongly recommend using a technology that integrates with Slice Machine: Next.js or Nuxt.

Welcome to the developer documentation for Prismic and JavaScript. This documentation will teach you how to make an application with vanilla JavaScript and Prismic. However, we do not recommend building a Prismic app with vanilla JavaScript.

Vanilla JavaScript is JavaScript without any frameworks. As a result, it can be maintenance-heavy and tricky to develop.

This documentation is meant to provide a theoretical overview of Prismic's JavaScript implementation.

📌 Who should use this documentation?

This documentation might be useful for students learning web development, experienced web developers building plugins, or developers working with undocumented frameworks.

Supported JavaScript frameworks

Most users will find more success with a JavaScript framework. Here are our currently-supported JavaScript frameworks:

React

"A JavaScript library for building user interfaces"

Next.js

"Hybrid static and server-side rendering, TypeScript support, smart bundling, route pre-fetching, and more."

Gatsby

"Create blazing fast websites and apps AND harness the power of 2000+ plugins"

Vue.js

"The Progressive JavaScript Framework"

Nuxt.js

"An open source framework making web development powerful."

Express

"Fast, unopinionated, minimalist web framework for Node.js"

Svelte.js

"Cybernetically enhanced web apps"

Six steps to success

Prismic allows you to learn and create your project at your own pace. In general, Prismic development has six basic steps (these are the steps for development):

  1. Setup: Creating a repository, modeling content, creating documents, installing Prismic, and configuring your client options
  2. Querying: Fetching data from your repository with the @prismicio/client package
  3. Templating: Formatting content in your app with the @prismicio/client package
  4. Building: Creating composable pages with Slices
  5. Deploying: Putting your app on a server
  6. Previewing: Configuring your app to display drafts

Use the docs for a specific framework. If you're not using one of these frameworks, you can use this guide, which explains how to implement Prismic with Vanilla JavaScript.

Next →

Set up Prismic

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum or using the feedback form above.