...
Initializing a New Canvas Project
As described in Creating a New Project, to To open a new Canvas project, select the “Import a Figma Design” option in the New Project modal when you select New Project on the Projects page.click the new project button or select a project that has already been created.
...
Basic Functionality
...
The New Canvas includes all of the basic features from the old canvas, including Zoom, Redo/Undo, and project sharing. Additionally, you can now preview Kajoo projects directly in CodeSandbox, a powerful browser-based IDE for web development. Simply press the “Publish to CodeSandbox” button next to the Publish button in the canvas, and quickly see your component live in the browser.
Drag and Drop
...
Kajoo 1.2 introduces the major addition of a brand new Canvas experience. Unlike the original Canvas, this Canvas provides a live preview of the final rendered code - you can even open up the inspector and look at the DOM yourself as you manipulate it in real-time.
Drag and drop with this canvas is easy, and immediately reflects the way the HTML DOM works.
The Tree Tab
...
In the new tree tab placed at the left-hand side at the bottom under the explorer and add tabs, users can see how elements are nested in the way they’ll be arranged in the DOM. Users can also select items in the tree, which works the same way as selecting them on canvas, and can even move items around by rearranging them in the tree.
...
In Kajoo, you can add sample data to a number of several elements and see your changes live in the Canvas. When you export your project’s code, this sample data will act as a default value for the element as a Sitecore field, or if you choose to make it a static value, it will be hard-coded.
Sitecore-First Development / Project Binding
Often timesOftentimes, Sitecore projects will have built-out Information Architecture, which includes a number of several templates with complex inheritance structures. Kajoo lets you work with these templates by letting you bind these existing templates to your Kajoo projects, then binding specific elements to fields in the templates.
...
The way it works is this: In Kajoo you can already can set up Site Configurations for the deployment purposes of Site Configurations for deployment. We have expanded the Site Configuration Options to include a field for Sitecore Layout Services URL, which allows Kajoo to access the Templates and Renderings in your Sitecore Instance of choice. After setting up the connection, in your Kajoo project, you can click “Bind” to select the Site and Instance. Then, you can pick the rendering item of your choice from your Sitecore Instance. Kajoo will grab the existing template attached to the rendering item. After choosing the rendering, the project is considered “bound,” and the option to bind selected elements to template fields will appear in the revamped Data tab.
...
When you deploy a project that is bound to a template, you can only deploy to the site that in which the template is located in. Then, instead of creating a new template and rendering items, Kajoo will simply push the code linked to the rendering item in Sitecore.
...
Users can now select the tags used by various elements - for example, select among <div>, <section>, and others for containers, or <h1>, <h2>, and others for headers. This change can be made either in the “Design” tab on the right , or by simply clicking a header above a selected element. This update gives users the most flexibility over their rendered markup.
...
Elements can snap into place using auto-positioning , or you can switch off auto-positioning to place them more exactly with freeStyle freestyle positioning. Freestyle uses absolute positioning in CSS in addition to top, left, right, and bottom values.