November 09, 2022v3.0.75
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.
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.
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.
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.
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.
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.
“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.
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.
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
Built in TeleportHQ