All Collections
The Code Editor
Getting Started
File structure in the Code Editor
File structure in the Code Editor
Diego Muralles avatar
Written by Diego Muralles
Updated this week

With the launch of the CLI, we will start the process of deprecating the Code Editor. For a forward-looking approach, we encourage you to create all new widgets using the CLI. Read more

The Files & Dependencies panel now shows you the structure of your current Package (Takes base in the project you created the Element in). Group your custom Elements together on the same Package for easy usage later. I.e. you could make two Elements “Animated Words” and “Animated Text” in the same Package, and name the package “Animated Typography”.

Your file structure after creating a new element

When you create an Element we create the necessary files for that Element to function (and for you to change it). These files include:

  • ElementName (Folder)

  • form.tsx - Contains the code to render the Elements data form (opened by double-clicking on your Element in the Design Editor mode)

  • index.tsx - Contains the code to render the Element. This file needs to export a function or instance of React.Component.

  • File: styles.scss - Your Elements stylesheet. The .scss filename just means we’re using the Sassy CSS syntax, which is the main syntax for Syntactically Awesome Style Sheets. You can write normal CSS here as well, but Sassy CSS offers so much more.

  • vev-manifest.json - Configuration file for the Element. Settings to adjust name, description, readme, default sizes, icons and more.

  • package.json - Configuration file for your Element Package. Contains the name for your group of Elements and access/sharing settings

With added folders, files, and an npm dependency.

Did this answer your question?