microCMS

Tutorial
Next.js
Nuxt 3
Nuxt 2
Gatsby
Astro
Remix
JavaScript
PHP
Ruby
Go
iOS
Android
Manual
Account & Login
Services
Payment
API
Fields
Contents
Rich Editor
Reviews
Media
Permission Management
Connection
Logs
Security
Authentication
Specifications & Limitations
Content API
Basic Operations
API Keys
Responses & Error Handling
Management API (Beta)
Content Operations
Media Operations
Member Operations
API Operations
Service Operations
Responses & Error Handling
Image API
Parameters
MCP Server

Getting Started (Browser)

Last updated: 2026/04/24

This document outlines the quickest steps to use microCMS with JavaScript in the browser.
If you are using microCMS from JavaScript for the first time, please try these steps first.

Examples in microCMS Templates

There are also examples of templates using JavaScript (jQuery) in microCMS templates.

You can try out a pre-built environment with just one click, so please refer to this as well.
Search results for "JavaScript (jQuery)" | microCMS Templates

Below are the methods for setting it up yourself.

Things to Confirm in Advance

  • You need to have completed the creation of the microCMS service. If not, please refer to the following documentation.

Setting Up microCMS

First, let's create a simple API with microCMS.

  • Object format
  • One text field

In the API creation screen, enter the desired API name and endpoint.



Next, select the object format.


Finally, set the fields. This time, we will set only one text field.



With the above settings, the API will be created, allowing you to submit content.
Move to the editing screen, enter the desired values, and publish.



At this point, a response containing content data will be returned from the API.
Click on the API preview in the upper right corner to access the created API and confirm that a JSON response is being returned.


Preparing Files

Accessing the microCMS API can be done directly via URL fetch, but it can also be easily done using the provided SDK.

microcms-js-sdk is available on the library's public site, unpkg.
You can load the SDK by specifying it as follows.

<script src="https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js"></script>

If you want to specify a version, change the part after @latest.

<script src="https://unpkg.com/microcms-js-sdk@2.7.0/dist/umd/microcms-js-sdk.js"></script>


Next, create an index.html file as shown below to retrieve data. Set service-domain and api-key to the ones you configured.

<!DOCTYPE html>
<html>
  <head>
    <title>microCMS SDK</title>
  </head>
  <body>
    <h1 id="text"></h1>
  </body>
  <script src="https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js"></script>
  <script>
    const { createClient } = microcms;

    const client = createClient({
      serviceDomain: 'service-domain', // service-domain is the XXXX part of https://XXXX.microcms.io
      apiKey: 'api-key',
    })
    client.get({ endpoint: 'hello'}).then((res) => {
      document.querySelector('#text').textContent = res.text
    })
  </script>
</html>
informationInformation
  • If you use this method, the API key will be in a user-readable format. Depending on how it is used, this may pose a security risk, so please be cautious. For more details, please check "Do I need to hide my API key?".

Let's open index.html in this state.
The content submitted to microCMS will be retrieved and displayed on the screen.



Here, we are dynamically displaying data managed by the CMS by inserting the data retrieved from the microCMS API into the contents of the h1 tag.

Contents