How to add a slider control for a variable in Fragment?

Define the variable in the props object with min and max parameters in your sketch file, and Fragment will auto-generate a slider. For instance, the README example shows 'radius' with params for min and max, creating a slider in the GUI.

Fragment vs canvas-sketch: which is better for generative art?

Fragment offers an integrated environment with GUI controls and export features, while canvas-sketch is more minimalistic. Choose Fragment if you want built-in UI and easy exports; opt for canvas-sketch if you prefer a lightweight, library-agnostic approach.

Can I deploy a Fragment sketch to a static site like Netlify?

Yes, Fragment supports static builds for production deployment. Generate the build files using the CLI, and deploy them to any static hosting service, as mentioned in the static build feature in the README.

What video formats does Fragment support for export?

Fragment exports to MP4, WebM, and GIF video formats, leveraging browser capabilities. The README lists these under export capabilities, but codec support depends on the user's environment.

How to handle mouse events in a Fragment sketch?

Use interactive triggers provided by Fragment to respond to events like mouse clicks. The features mention interactive sketches using triggers, allowing you to set up event-based interactions in your code.

Is Fragment compatible with React or Vue projects?

Fragment is a standalone environment for canvas sketches and doesn't natively integrate with UI frameworks like React or Vue. However, you can embed the exported canvas or static build in a component if needed.

How to install Fragment without global npm?

Use npx to run Fragment without global installation, as shown in the installation section with 'npx fragment-tools sketch.js --new'. This avoids polluting the global namespace and works for one-off projects.

Fragment.tools — Creative Coding Web Environment

What is Fragment.tools?

Fragment is a web development environment tailored for creative coding and generative art. It provides a simple API to work with HTML5 Canvas and supports multiple rendering libraries like p5.js, three.js, and WebGL shaders. The tool solves the problem of fragmented workflows by integrating sketching, live preview, GUI controls, and export functionalities into a single environment.

Target Audience

Creative coders, generative artists, and developers building visual sketches or interactive canvas-based projects. It's ideal for those who want a streamlined workflow without managing separate tools for coding, previewing, and exporting.

Value Proposition

Developers choose Fragment for its integrated approach—combining multiple rendering engines, live GUI controls, and export features in one tool. Its hot reloading for shaders and support for popular libraries like p5.js and three.js make it uniquely suited for rapid visual experimentation.

[alpha] A web development environment for creative coding

Use Cases

Best For

Creating generative art sketches with live parameter adjustments
Prototyping visual ideas using Canvas 2D, p5.js, or three.js
Developing WebGL fragment shaders with hot reloading
Exporting canvas animations to video formats like MP4 or GIF
Building interactive art installations with trigger-based controls
Teaching creative coding with an integrated development environment

Not Ideal For

Projects requiring deep integration with server-side frameworks or complex backend logic
Teams needing highly customizable, brand-specific UI components beyond auto-generated controls
Applications where performance-critical rendering outside of canvas (e.g., WebGPU) is a priority
Developers looking for a general-purpose web framework with built-in routing and state management

Pros & Cons

Pros

Multiple Rendering Engines

Supports Canvas 2D, p5.js, three.js, and WebGL shaders, providing flexibility for different visual styles, as listed in the features.

Auto-Generated GUI

Creates control panels directly from sketch variables, enabling real-time parameter adjustment without manual UI coding, as shown in the example with props.

Direct Export Functionality

Allows exporting canvas content to various image and video formats like PNG, MP4, and GIF, simplifying sharing and deployment, per the export capabilities.

Hot Shader Reloading

Offers live reloading for GLSL shaders with glslify support, speeding up iterative development for fragment shaders, as highlighted in the features.

TypeScript Integration

Provides full TypeScript support for type-safe sketches, reducing errors in complex projects, mentioned in the TypeScript support feature.

Cons

Limited Ecosystem

As a niche tool, it has fewer plugins or community extensions compared to mainstream frameworks, which might restrict advanced customizations or integrations.

GUI Customization Constraints

The auto-generated GUI is convenient but may not support advanced styling or complex control layouts, as it's designed for simplicity over flexibility.

Dependency on External Libraries

Relies on p5.js, three.js, and other libraries, so updates or changes in these could break compatibility or require manual adjustments in sketches.

No Built-in Backend Support

Focused on client-side rendering, it lacks features for server-side operations or database interactions, limiting use in full-stack applications.

Frequently Asked Questions

What is Fragment.tools?

Target Audience

Value Proposition

Use Cases

Best For

Creating generative art sketches with live parameter adjustments
Prototyping visual ideas using Canvas 2D, p5.js, or three.js
Developing WebGL fragment shaders with hot reloading
Exporting canvas animations to video formats like MP4 or GIF
Building interactive art installations with trigger-based controls
Teaching creative coding with an integrated development environment

Not Ideal For

Projects requiring deep integration with server-side frameworks or complex backend logic
Teams needing highly customizable, brand-specific UI components beyond auto-generated controls
Applications where performance-critical rendering outside of canvas (e.g., WebGPU) is a priority
Developers looking for a general-purpose web framework with built-in routing and state management

Pros & Cons

Pros

Multiple Rendering Engines

Supports Canvas 2D, p5.js, three.js, and WebGL shaders, providing flexibility for different visual styles, as listed in the features.

Auto-Generated GUI

Creates control panels directly from sketch variables, enabling real-time parameter adjustment without manual UI coding, as shown in the example with props.

Direct Export Functionality

Allows exporting canvas content to various image and video formats like PNG, MP4, and GIF, simplifying sharing and deployment, per the export capabilities.

Hot Shader Reloading

Offers live reloading for GLSL shaders with glslify support, speeding up iterative development for fragment shaders, as highlighted in the features.

TypeScript Integration

Provides full TypeScript support for type-safe sketches, reducing errors in complex projects, mentioned in the TypeScript support feature.

Cons

Limited Ecosystem

As a niche tool, it has fewer plugins or community extensions compared to mainstream frameworks, which might restrict advanced customizations or integrations.

GUI Customization Constraints

The auto-generated GUI is convenient but may not support advanced styling or complex control layouts, as it's designed for simplicity over flexibility.

Dependency on External Libraries

Relies on p5.js, three.js, and other libraries, so updates or changes in these could break compatibility or require manual adjustments in sketches.

No Built-in Backend Support

Focused on client-side rendering, it lacks features for server-side operations or database interactions, limiting use in full-stack applications.

Frequently Asked Questions

Fragment.tools

What is Fragment.tools?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?

Fragment.tools

What is Fragment.tools?

Overview

Use Cases

Best For

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions

Related Projects

Found a gem we're missing?