Skip to main content

FAQ

Welcome to the DynaMaker Frequently Asked Questions (FAQ) page!

Use the categories below to jump to the right section:

tip

Contact us at support@dynamaker.com if you do not find your question.

Docs​

How do I find which library to use?​

You can find all available DynaMaker libraries with short descriptions here.

Do you have more examples apart from the tutorials and how-to?​

We are adding more examples and snippets to make development easier. The tutorials cover the basics and the how-to examples address specific and common cases. You are welcome to suggest example cases that could help the community. Contact support@dynamaker.com and we can discuss a new addition.

Why do the examples in docs differ in style from the templates in DynaMaker?​

We constantly develop and improve DynaMaker, and sometimes the docs lag behind. If you notice differences, contact support@dynamaker.com and we will address them promptly.

What does deprecated mean?​

Deprecation means code is marked as no longer recommended, usually because newer code replaces it. Deprecated code remains temporarily to prevent errors. You might notice some classes and functions you used earlier have been deprecated. They still work, but you should avoid them in new code. They no longer appear in IntelliSense and display as strikethrough in the editor.

Browser & Language​

Does DynaMaker work in all browsers (Chrome, Safari, Mozilla, Edge, etc)?​

DynaMaker can run in different browsers, but Google Chrome is preferred for both development and usage. It provides the most consistent feature support and UI styling. Development is supported only on desktop. Published applications can be used on mobile devices such as tablets.

I want to learn more about JavaScript and TypeScript. Can you recommend resources?​

We use TypeScript as the language of choice for creating dynamic tools. TypeScript is a typed version of JavaScript and is well established for building web applications.

Our tutorials are a great place to start if you are new to coding. They require no prior programming experience and use clear, beginner-friendly examples throughout.

For those new to the language, here is a mini guide:

TypeScript is like a calculator that remembers things. You tell it what values you want to store, compare, or compute, and it helps you organize logic.

Variables (remembering values)

  • Assign a value with =:
const material = 'steel'
  • Use let if the value can change:
let force = 100
force = 200
  • Use const if the value should never change:
const g = 9.81 // gravity, constant
  • Lists (arrays) use []:
const materials = ['steel', 'wood', 'plastic']
  • Objects use {} and let you group properties:
const steel = {
  name: 'Steel',
  density: 7850, // kg/m³
  color: 0xcccccc,
}

Conditions (choosing between options)

  • if / else:
if (material === 'steel') {
  thickness = 10
} else if (material === 'wood') {
  thickness = 20
} else {
  thickness = 30
}
  • short form (inline if):
const thickness = material === 'steel' ? 10 : 30
  • switch (cleaner for many options):
switch (material) {
  case 'steel':
    thickness = 10
    break
  case 'wood':
    thickness = 20
    break
  default:
    thickness = 30
}
  • boolean logic:
if (material === 'steel' && thickness < 15) {
  console.log('OK for load')
}

Functions (reusable formulas)

  • Define a function:
function stress(force: number, area: number) {
  return force / area
}
  • Use it:
const σ = stress(500, 50) // 10 N/mm²
  • Functions without return values are just commands:
function resetAssembly() {
  // clear all components
}
  • Shorter inline version (common in callbacks):
const double = (x: number) => x * 2

Loops (repeat things)

  • Count with a for loop:
for (let i = 0; i < 5; i++) {
  console.log(`Bolt ${i} tightened`)
}
  • Go through a list with for..of:
const beams = ['I-beam', 'C-channel', 'tube']
for (const beam of beams) {
  console.log(`Adding ${beam}`)
}

Debugging (print results)

Show values in the Console (open with F12 in Chrome):

console.log('Density of steel:', steel.density)

Summary

  • const = fixed values, let = changeable values
  • Use if / switch to pick logic paths
  • Use functions to write formulas once and reuse
  • Use loops to repeat actions
  • Use console.log() to check what’s happening

There are plenty of resources online (see TS in 5 minutes or TS object basics). Also consider AI tools that can assist you with TypeScript questions.

What shortcuts are available to code faster?​

On Windows the available keyboard shortcuts follow those from Visual Studio Code:

Rename​

  • F2: to rename a selected variable/function throughout the whole editor tabs.

Copy & Paste​

  • Ctrl+C: to copy the selected area or the entire row if nothing is selected
  • Ctrl+V: to paste what has been copied
  • Ctrl+X: to cut (copy & remove) the selected area or the entire row if nothing is selected
  • Shift+Alt+⬇️/⬆️: to copy the rows selected and paste them into the row below/above

Redo, Undo and Save, Autoformatting​

  • Ctrl+S: to save and update the changes (same as Save & Update)
  • Ctrl+Z: to undo
  • Ctrl+Shift+Z: to redo (same as Ctrl+Y)
  • Shift+Alt+F: to autoformat

Find and Replace​

  • Ctrl+G: to go to the number of row typed
  • Ctrl+F: to find a word
  • Ctrl+H: to find and replace a word
  • Alt+C: to enable matching case
  • Alt+W: to enable matching whole word

Comments​

  • Ctrl+': to comment (out) the entire row
  • Shift+Alt+A: to comment (out) the area selected

Group code​

  • Ctrl+K and Ctrl+0: to fold all functions
  • Ctrl+K and Ctrl+J: to unfold all functions
  • // #region in one row and // #endregion in another row below to be able to collapse the code whatever is between them. Additional comments can be written next to them. As an example:
// #region Door
const doorComponent = new DOOR.Component()
doorComponent.setProperties({ height: 2000 })
this.componentHandler.add(doorComponent)
// #endregion

You can find all these shortcuts and more by pressing F1 in the editor:

Dashboard​

How does a Team work?​

A team contains your apps. It is recommended to have separate teams for different purposes.

For example, each person can have a personal team named Tutorials to complete tutorials and experiment individually. Everyone can also share a company team (for example Random Company) since you are all members of the same organization.

Under the team settings (cog wheel icon) you can find:

  • Members: the single owner can invite other members.
  • Subscription: manage your subscription, inspect published apps, and review available application licenses.
  • Settings: allow DynaMaker Support access, enable 2FA authentication, rename or delete the team, and transfer ownership.

For an app's settings at team level (cog wheel icon next to each app) you can also:

  • Copy: convenient for creating backups before major changes.
  • Delete: when the app is no longer used.
  • Move to: move the app to another team you are part of.

Publishing​

How can I limit access to my application?​

Read more about limiting access with the Auth0 plugin.

I published the wrong version of the app. How can I revert it?​

Sometimes a publish needs to be undone. There is no built-in rollback function yet. If you need to revert to a previous published version, email support@dynamaker.com and we will help you.

How can I unassign an application license?​

If all your application licenses are assigned and you want to replace one app with another, contact support@dynamaker.com and we will assist.

Application and UI​

How can I save and load my designs or configurations in an app?​

See what is needed in the how-to example.

How can I access a previous version of a configuration?​

Switch to a previous configuration revision in your URL. Read more at the end of the how-to example and about configuration information here.

How do I change the mouse buttons for camera settings?​

You can rebind mouse buttons for camera settings to suit your preferences using Studio.updateCameraSettings(). The following keys are the default settings:

Studio.updateCameraSettings({
  mouseButtons: {
    left: 'select',
    right: 'rotate',
    middle: 'pan',
    scroll: 'zoom',
  },
})

You can also rebind controls for touch devices within the same function:

Studio.updateCameraSettings({
  touch: {
    oneFinger: 'interact',
    twoFingers: 'zoom',
  },
})

Find more camera settings under Camera Handling.

How do I create a custom modal?​

Read more about pop-ups or modals here.

How can I change the style of the UI?​

DynaMaker includes built-in items like the Menu, Quickbar and Metrics. These are predefined and always look the same. To change styling you must override it in your application under STYLE.

Using CSS (Cascading Style Sheets) you can change look and position of almost everything in your app. Learn more about CSS here: https://developer.mozilla.org/en-US/docs/Web/CSS.

How can I change the font used in DynaMaker?​

Liberation Sans is the default font. If you want other fonts (including italic, bold, cursive, all caps, etc) you must add them as custom fonts. The font can be changed specifically if used in:

  • 3D scene and PDF exports (read more here).
  • UI (read more here).

My app is slow. What can I do to improve performance?​

A fast updating dynamic product is a key strength of DynaMaker. Try these tips to improve app performance:

  • Avoid calling the same function multiple times when once is enough.
  • 2D sketches update faster than 3D models.
    • Decide if you need 3D models in every step.
    • Use 3D steps only when you do not update the model and need it for visualization (for example exports).
  • Curves usually require more calculations than straight lines, especially in 3D. Use them only when needed (for example drawings or final 3D models such as STL files).
  • addExtrude() and addExtrudeCut() can use a sketch that consists of multiple closed sketches at once. For example:
    • A hollow cylinder can be made with 2 concentric circle sketches and one single extrude (no extrude cuts).
    • Multiple holes (circle sketches) can be cut at once if merged into a single sketch.
  • addExtrudeCut() usually requires heavy calculations. Try using sketches that already include holes via any boolean operation or by merging sketches directly with sketchA.mergkeSketch(sketchB).

Why is there a file size limit when uploading to the application dashboard?​

The limit exists because larger files increase load times for end users. To meet the limit you can split an assembly GLB file into multiple files (one part per file). If you have a file with large textures, compress the image data (for example by lowering resolution).

Parameters​

Why does my model flicker when updating parameters?​

With heavy STL models you might see flickering when updating a component using a slider parameter. This is because the model is recreated every time the component updates. If all models are created inside generateGeometry(), they are discarded and recreated each call. Avoid this by creating models outside the function so they are created once and cached.

For example, in the User Interface tutorial the roller component is created from 3 different STL models. These are created in GEOM3D. The functions that get models for generateGeometry() pull the existing static asset. That is why the tutorial app takes a few seconds to create the first section with multidirectional rollers and little time for subsequent ones. Even if deleted, adding a new one is fast because it is cached.

My parameter values are reset when switching tabs in the app.​

You can configure your product without losing work. However, as an app grows in complexity with more parameters and configurators in different tabs, issues can arise.

A common issue is parameters resetting to default values when switching tabs. This usually occurs due to one of two scenarios:

  • Scenario A: the default values of parameters are not set correctly. All parameters have a default value found in the optional arguments (for example defaultValue).

    Dropdown parameters have an easier way to set default values based on actual values rather than index by setting the parameter value immediately after creating it. Examples of parameters with default values:

    // Input parameter
    const nrCoffees = component.getProperty('nrCoffees')

    const nrCoffeesParameter = SKYPARAM.generateInputParameter('nr-coffee-parameter', 'Nr Coffees', {
      defaultValue: nrCoffees, // here is the default value coming from properties
      minValue: 0,
      maxValue: 100,
      stepSize: 1
    }
    const coffeeFlavor = component.getProperty('coffeeFlavor')

    const coffeeFlavorParameter = SKYPARAM.generateDropdown(
      'coffee-flavor-parameter',
      'Coffee Flavor',
      [
        new SKYPARAM.DropdownItem(`Cappuccino`, CONSTANTS.COFFEE_FLAVOR.CAPPUCCINO),
        new SKYPARAM.DropdownItem(`Mocha`, CONSTANTS.COFFEE_FLAVOR.MOCHA),
        new SKYPARAM.DropdownItem(`Latte`, CONSTANTS.COFFEE_FLAVOR.LATTE),
      ],
      { defaultValue: coffeeFlavor }, // here is the default value coming from properties
    )
    note

    You can read more about the parameter optional arguments here.

  • Scenario B: the configurator shown in the app UI is created in an assembly subcomponent. For simplicity this subcomponent might be cleared and added again to the assembly component handler (as in the tutorial). One way to address this is to move all configurators (and related properties) to the top-level component (usually the assembly) so you update properties once and pass them to subcomponents.

    The risk of configuring a subcomponent directly is that if your product cannot include that subcomponent (for example due to a disabling parameter) you might be configuring nothing because it does not exist. Having the configurator in a component that always exists (like the assembly even if it has no subcomponents) is safer. Once the structure is stable and feasible you can move configurators to subcomponents.

How can I update the model instantly when using a slider parameter?​

Do the following to make models update faster with a slider:

  • In your component:
    • Open PARAMETERS.
    • Use configurator.addUpdateCallback() instead of configurator.addCompletionCallback(), since the latter adds a short delay.
  • In your application:
    • Open UI.
    • Open the tab (SKYUI.Tab) where your configurator is located.
    • Set the optional argument instantUpdate to true.
    • Example:
    const productTab = new SKYUI.Tab('Product', generateProductToolbarItems, {
      instantUpdate: true,
    })
    Updating a model instantly when moving a slider means the generateGeometry() function is called more frequently. This is suitable for simple models. It can affect performance in larger products. You can turn it off by setting instantUpdate: false.

My model is not changing when I change parameters (slider/input field, dropdown)​

Make sure you run the function that modifies your component in the configurator callback. For example, if a table changes size with a parameter and needs more legs, run something like component.update() in configurator.addCompletionCallback(), where update() contains the logic to add more legs as subcomponents.

Using component.setProperties() automatically triggers component.update(), where you may update all subcomponents. Ensure the top-level component passes the correct properties to its subcomponents.

Components and Models​

What system is used for rotation of geometries?​

Rotation of geometries is based on Euler angles. Read more here and try the interactive app there.

Something is wrong with my model. How can I fix it?​

Often the issue is not in the model but in the sketches that generate it. Tips:

  • When cutting or extruding use a closed sketch. End the sketch with sketch.lineToId(0) or sketch.curveToId(0) to return to node 0.
  • When doing cuts, try making them like extrusions (model.union() or model.addExtrude()) to see where they appear. If they collide with another model (for example holes), change the opacity of the model material to inspect it.

If none of the above works, try debugging to confirm your variables and properties have expected values.

Something is wrong with my sketch. How can I fix it?​

Read more about sketch troubleshooting (SKYCAD.Sketch) and static sketches here.

Drawings​

My drawing takes time to generate due to projections. What can I do to improve it?​

Read tips here to improve drawing performance when generating projections.

Is it possible to take pictures from the app and add them to a drawing?​

Yes. Since this is a special solution, contact support@dynamaker.com for guidance.

Editor​

How can I fix an unintentional bug that makes the editor load forever (for example endless loop)?​

If you create an endless loop (for example wrong input in a for-loop) or add many components with heavy models not yet optimized, the editor (component, drawing, etc.) can hang or take a long time to load, preventing a new save. There is a solution.

Access the code editor without loading the preview:

  • Go back to the app dashboard.
  • Open the settings of the affected component/UI/drawing.
  • Click Edit Without Preview to open the code editor without loading the preview.
  • Revert the unintentional bug (fix, remove, or comment it out).
  • Click Save & Update and return to the app dashboard.
  • Open the component/UI/drawing as usual (click thumbnail or name) and continue working.

How can I update the thumbnails of my component in the app dashboard?​

Update the thumbnail in the editor settings at the bottom right of any code editor.

Why can some functions be visualized automatically, while others need a test?​

There are limitations to which functions can be visualized automatically in the editor.

Functions must only have input parameters of type number, string, or boolean and return one of: SKYCAD.Sketch, SKYCAD.Layout, SKYCAD.LayoutOnPlane, SKYCAD.MeshModel, SKYCAD.ParametricModel, or SKYCAD.GeometryGroup.

Can be run automatically
export function generateBaseSketch() {
  const sketch = new SKYCAD.Sketch()
  // ...
  return sketch
}

export function generateBaseModel(width: number) {
  const model = new SKYCAD.ParametricModel()
  // ...
  return model
}
Requires a test to be run
export function generateBaseSketch(input: { width: number }) {
  // ...
}

export function generateBaseModel(width: number) {
  const model = new SKYCAD.ParametricModel()
  // ...
  return { model, someOtherThing }
}

Components must extend STUDIO.BaseComponent:

Can be run automatically
export class Component extends STUDIO.BaseComponent<Properties> {
  // ...
}
Requires a test to be run
export class Component {
  // ...
}

Imports and Exports​

What file formats are supported in DynaMaker?​

2D files

  • PDF and DXF files are supported and can be uploaded to the app dashboard. From these you can create static sketches for modeling (extrusions, cuts, etc). DXF is preferred for this. You can also import these together with SVG directly into the application configuration and use them as references.
  • You can export DynaMaker drawings as PDF and DXF. See the Drawings tutorial.
  • JPEG and PNG files are supported. You can add a picture to a layout through layout.addImage() (explained in Drawings), use them as thumbnails in a parameter modal, or take a picture of the current preview and add it to a drawing.

3D files

  • STL, PLY and GLB files are supported for import. These become static models. GLB files with textures are supported.
  • You can export DynaMaker geometry in those formats plus BIM (IFC) and STEP. Read more in this how-to example.

Other files

  • Tables (CSV or TSV) and objects (JSON) to create datasets or use in plugins like PIM or Translation.
  • BOM data can be exported as TXT or CSV.

Is it possible to convert certain file formats to other formats within DynaMaker?​

Yes. DynaMaker includes a plugin for converting file formats to supported ones. Read more about the CloudConvert plugin here.

How can I download geometries as STEP or BIM (IFC) files?​

Read more about exporting 3D geometry here.

How can I download my PDF drawing through a button?​

Read more about downloading files of any available type in this how-to example.

How can I generate and download a BOM through a button?​

Read more in this how-to example, where you learn how to generate the BOM and both download it and show it in your drawings.

My dataset includes strange or broken characters.​

When exporting your dataset to CSV format, save it as CSV UTF-8 for special characters if that option exists (for example in Microsoft Excel). Other software like Google Sheets might handle the encoding automatically when exporting to CSV.

What can I do if I reach the dashboard file limit of 50 MB?​

If you reach the file limit, use an external storage solution. We recommend Google Buckets since they are cost effective and straightforward to set up.

Read more about fetching files from external storage here.

Fetching external data gets blocked by CORS policy. What can I do?​

For security reasons some websites do not allow API calls to external addresses unless the server explicitly allows it (read more here for reference). Contact the administrator of the external service for guidance.

I'm stuck and none of the above solved my problem. Could you help me?​

We are happy to help you solve any other problem. Contact support@dynamaker.com.