File Structure
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.
Last modified 2mo ago
Copy link