Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


A Gatsby plugin to add support for CesiumJS.


npm install --save gatsby-plugin-cesium cesium

How to use

Edit gatsby-config.js

module.exports = {
  plugins: ['gatsby-plugin-cesium'],

Notable differences from the official webpack integration guide of Cesium

  • All of the Cesium libraries can be imported and used with the following syntax:

    import Cesium from 'cesium';
    import 'cesium/Source/Widgets/widgets.css';
    import React from 'react';
    class CesiumContainer extends React.Component {
      componentDidMount() {
        const viewer = new Cesium.Viewer('cesiumContainer');
      render() {
        return <div id="cesiumContainer" />;
  • Individual modules can be imported using the following syntax:

    import Color from 'cesium/Source/Core/Color';
    const color = Color.fromRandom();
  • glTF model loading is supported out of the box:

    import CesiumGroundModelURL from '../data/models/CesiumGround.gltf';
    const model = viewer.scene.primitives.add(
        url: CesiumGroundModelURL,
© 2023 Gatsby, Inc.