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>

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.