Create Your First JSCAD Configurator

Learn to create parametric 3D designs with interactive controls using JSCAD.

Beginner

What You'll Learn

Write basic JSCAD code

Add interactive parameters

See real-time updates

Save and export designs

Share configurators

Understand the workflow

Step 1: Open the 3D Viewer

Access the Viewer

Navigate to the STL.Show 3D viewer where you'll create your configurator.

Go to the 3D viewer workspace

You'll see an empty 3D scene

3D Viewer Workspace

Empty scene ready for creation

Step 2: Create a New Code Object

Use the Code Menu

Toolbar Actions

In the 3D viewer toolbar, find the "Code" menu and create a new JSCAD object.

Click "Code" in the toolbar

Select "New Code Object"

Code editor will open

What Happens

A new code object is created in the scene

Code editor opens with template code

Scene enters "PENDING_CHANGE" mode

Step 3: Write Your JSCAD Code

Basic JSCAD Structure

Parameter Definitions

Define the parameters that users can adjust in your configurator.

const getParameterDefinitions = () => [

{ name: 'width', type: 'float', initial: 20, caption: 'Width (mm)' },

{ name: 'height', type: 'float', initial: 10, caption: 'Height (mm)' },

{ name: 'depth', type: 'float', initial: 15, caption: 'Depth (mm)' }

]

Main Function

Create the 3D geometry using the parameter values.

function main(params) {

const { width, height, depth } = params

return cube({ size: [width, height, depth] })

}

💡 Tip

Start with simple shapes like cubes, spheres, and cylinders. You can combine them with boolean operations later.

Step 4: Configure Parameters

Parameter Modal

Automatic Detection

When you save code with parameters, a modal automatically opens for configuration.

Parameter modal appears

Adjust values as needed

Click Apply to compile

Parameter Types

float: Decimal numbers (e.g., 10.5)

int: Whole numbers (e.g., 5)

choice: Dropdown selections

checkbox: True/false toggles

Step 5: Test and Refine

Iterative Design

Real-time Updates

See your changes instantly as you modify parameters or code.

3D model updates immediately

Adjust parameters and reapply

Edit code and save changes

Common Improvements

Add more parameters for customization

Use boolean operations to add holes

Add fillets and chamfers for realism

Optimize code for better performance

Step 6: Export and Share

Save Your Work

Export Options

Save your configurator in different formats for various uses.

Export JSCAD code

Export STL file

Share configurator link

Sharing Your Configurator

Others can view and customize your design

Download STL files for 3D printing

Use in other CAD software

Example: Phone Stand Configurator

Here's a complete example of a phone stand configurator you can create:

const getParameterDefinitions = () => [

{ name: 'phoneWidth', type: 'float', initial: 75, caption: 'Phone Width (mm)' },

{ name: 'phoneHeight', type: 'float', initial: 150, caption: 'Phone Height (mm)' },

{ name: 'standAngle', type: 'float', initial: 15, caption: 'Stand Angle (degrees)' },

{ name: 'thickness', type: 'float', initial: 3, caption: 'Material Thickness (mm)' }

]

function main(params) {

const { phoneWidth, phoneHeight, standAngle, thickness } = params

const base = cube({ size: [phoneWidth + 20, thickness, phoneHeight * 0.3] })

const back = rotate([standAngle * Math.PI / 180, 0, 0],

cube({ size: [phoneWidth + 20, thickness, phoneHeight * 0.7] }))

return union(base, back)

}

This creates a customizable phone stand with adjustable dimensions and angle.

What's Next?

Now that you've created your first configurator, explore these advanced topics:

AI-Powered Design Advanced Parameters

Previous: STL Preview Next: AI JSCAD