Modular Use

If you'd like to simply write your sketch in a JS module, you can either load q5.js normally with an HTML script tag or like this:

import 'https://q5js.org/q5.js';

q5 does not provide exports, Q5 and createCanvas are added to the global scope.

If you only want to load parts of q5 instead of the whole q5.js default bundle, "q5-core.js" must be loaded first.

import 'https://q5js.org/src/q5-core.js';

These files are included in the default "q5.js" bundle:

import 'https://q5js.org/src/q5-core.js';
import 'https://q5js.org/src/q5-canvas.js';
import 'https://q5js.org/src/q5-2d-canvas.js';
import 'https://q5js.org/src/q5-2d-shapes.js';
import 'https://q5js.org/src/q5-2d-image.js';
import 'https://q5js.org/src/q5-2d-soft-filters.js';
import 'https://q5js.org/src/q5-2d-text.js';

import 'https://q5js.org/src/q5-color.js';
import 'https://q5js.org/src/q5-display.js';
import 'https://q5js.org/src/q5-dom.js';
import 'https://q5js.org/src/q5-fes.js';
import 'https://q5js.org/src/q5-input.js';
import 'https://q5js.org/src/q5-math.js';
import 'https://q5js.org/src/q5-record.js';
import 'https://q5js.org/src/q5-sound.js';
import 'https://q5js.org/src/q5-util.js';
import 'https://q5js.org/src/q5-vector.js';

import 'https://q5js.org/src/q5-webgpu-canvas.js';
import 'https://q5js.org/src/q5-webgpu-shapes.js';
import 'https://q5js.org/src/q5-webgpu-image.js';
import 'https://q5js.org/src/q5-webgpu-text.js';

Additional addons:

import 'https://q5js.org/src/q5-noisier.js';
import 'https://q5js.org/src/q5-sensors.js';