Skip to main content

Getting started with Blockly

4. Add basic HTML and CSS​

Create the HTML​

Open the src/ folder and find the file called index.html. In this file, you'll specify some basic structure for your app. You'll also make a div (here called blocklyDiv) that you'll later inject Blockly into.

Copy and paste the following HTML into your index.html file.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Blockly Sample App</title>
  </head>
  <body>
    <div id="pageContainer">
      <div id="outputPane">
        <pre id="generatedCode"><code></code></pre>
        <div id="output"></div>
      </div>
      <div id="blocklyDiv"></div>
    </div>
  </body>
</html>

Examine the CSS​

The css for the app is already included in the index.css file. This codelab includes basic styling for the webpage.

If you would like to change the appearance of Blockly's toolbox and workspace, you can check out the customizing your themes codelab. For more fine-grained styling of components and blocks, you can consult the CSS codelab.

Import Blockly​

At various points throughout this codelab, you'll have to import Blockly in different ways. Since you already installed Blockly using npm, you can freely import Blockly into your files without an additional step. Add the following import statement to index.js:

import * as Blockly from 'blockly';

Importing Blockly this way includes the core Blockly library, the built-in blocks, and the English translations. It also includes some other pieces you need but we won't discuss yet, like the JavaScript code generator.

However, sometimes you may only want to import the core Blockly library. In that case, you could import Blockly using:

import * as Blockly from 'blockly/core';