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.

For modular use, meaning if you only want to load parts of q5 instead of the whole q5.js default bundle, the "q5-core.js" module 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 q5 modules:

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