Release notes

November 09, 2022

v3.0.75

New features

Conditional rendering

The new conditional rendering feature allows you to create states inside components so that you can render elements based on conditions that you establish. Define states, link them to nodes and control them via events. You can create components that include accordions, tab selectors, carousels, and other similar interactive elements.

In advanced mode (specifically, with Developer mode enabled), you can also define functions for your elements and use them in widgets.

Keep in mind that this feature is still in development and will disable HTML and CSS export. You can enable it in your Project Settings under the Experimental Features sections.
Navbar interactive element

The Navbar is a pre-made smart component that you can use in the Interactive section of the Elements panel. It is designed for easy implementation and has built-in responsive and animated features that you can quickly customize to your liking.
Interactive navbar presentation
Media query guidelines

The background of the canvas now has differently colored lines to show which media query is active. This improves visibility and helps you understand which query is currently in use. In previous releases, we made sure that the canvas width stays the same throughout the project, which, together with this new feature, should reduce confusion.
Media query guidelines presentation
Code embed

The Elements tab in the Left panel now includes a Code Embed element in the Media section. When you add this element to the canvas, it opens an edit modal where you can enter any code (HTML, JS, CSS, or anything else that the browser can run).

This feature is still experimental and will be improved in future updates.
Code embed presentation
Lottie animations support

The Elements section in the Left panel now includes a special Lottie element that you can use to add Lottie files to your projects. This ensures that your code runs correctly when you export it to different frameworks.

To use the new Lottie element, you will need the animation JSON file URL (you can find examples on lottiefiles.com), which you can then add as a source in the Attributes panel.
Lottie animations presentations
Copy paste HTML code

You can now paste HTML code directly into your project by copying it to your clipboard and using the "Paste" command (CTRL/CMD + V or right-click). A code modal similar to the one used by the Code Embed element will appear, and the pasted code will be displayed. If the code passes validation, you can save it as TeleportHQ elements that you can interact with in your project.

This feature is different from the Code Embed element because it imports the code into individual elements and classes, rather than saving it as-is.

This means that it has some limitations, such as not being able to import JavaScript or having constraints on text, but the resulting elements are more usable within our platform.
Code copy paste presentation
Copy components across projects

You can now copy a component from one project and paste it into another project. To do this, right-click on the component in the left sidebar under Layers & Files, select "Copy component to clipboard," and then paste it (CTRL/CMD + V) into the other project.

The component will be imported into the new project. This allows you to easily reuse components across multiple projects.
Copy paste components presenation

Updates

Toggle CSS classes and styles

You can now enable or disable individual CSS classes and style properties in the Advanced panel without deleting them.

This allows you to see how an element would look without a specific class or property without affecting previews or deploys.

This function is similar to the developer tools found in web browsers.
Toggle CSS and properties presentation
Gap property in right panel

The Gap property is now fully supported in the Visual editor, and you can find a dedicated input for it in the Inner Layout section of the Right panel. Previously, you could add the Gap property manually in the Advanced tab, but there was no support or guidance for using it.

Now, the input in the Inner Layout section makes it easy to use the Gap property in your projects.
Gap property presentation
“Expand/collapse all” button in treeview

When you hover over container-type elements in the tree view of the Layers & Files section you will see a new button that allows you to collapse or expand the container and all the elements inside it.

This can be useful for organizing and navigating your project.
image
New templates

There are six new unique templates that you can use to start your projects. You can access them when you create a new project.

These templates are designed for different industries and have their own individual styles and color palettes.

This can save you time and help you create professional-looking projects quickly.
New templates presentation

Improvements & Fixes

  • UI updates and improvements to the Interactive Elements and Code Embed element preview
  • Code Embed & HTML Copy/Paste validation and formatting fixes
  • Bug fixes related to page routes, code generation and dev mode

What's coming next

  • Files upload management
made-with-teleportBuilt in TeleportHQ