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 inspector and look at the DOM yourself as you manipulate it in real time. While we’re still supporting the original Canvas and have plans in store for it, this new Canvas gives you greater flexibility to make components pixel-perfect to your designs.
We’re very excited to announce that Kajoo now has the ability to import designs from Figma, all in a few clicks! First, install the Kajoo plugin. Then, open your Figma design. Right-click the frames that you want to export, open the Kajoo plugin, then click “copy layers.” Once that’s done, you can open a new Figma project in Kajoo, paste the copied design, and see the code rendered immediately!
The Data tab shows every element in the project, along with all relevant options per element. Users can see how selected elements will be translated into Sitecore fields upon deployment, or they can change them into static, hard-coded values in the markup. Users can also switch element types from the Data panel (eg text to rich text).
Often times, Sitecore projects will have built-out Information Architecture, which includes a number of 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 already can set up Site Configurations for the purposes of 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.
Once a project is bound, every element must either be bound to a template field or designated as a “Static Value,” which will render not as a dynamic Sitecore field but as hard code. You can also choose to unbind your project, which will sever the connection between your project and the Sitecore instance, and reverse the links between your project’s elements and the selected Template’s fields.
When you deploy a project that is bound to a template, you can only deploy to the site that the template is located in. Then, instead of creating new template and rendering items, Kajoo will simply push the code linked to the rendering item in Sitecore.
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.
When you install the Kajoo plugin to the Sitecore instance(s) of your choice, you now have the option of giving the instance a custom name. When you subsequently log into the Kajoo plugin on Sitecore, you’ll be able to see both the name of the instance along with the name of the organization the instance is registered under.
Kajoo now supports the ability to pre-set deployment frameworks for Sites. If you have a JSS site that utilizes Next.JS, you now have an option in Site Configuration settings to select Next.JS as a deployment framework. Then, when you commit your project code to your repo, or deploy your project to Sitecore, it will utilize the correct Next.js code framework.
Whatever your Site Configuration settings, you can always choose to download your project’s code in either React or Next.JS now. In the publishing wizard, simply choose the framework of your choice after selecting the “Download” option.
In the new tree tab, 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 now add sample data to a number of 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 Sitecore field, or if you choose to make it a static value, it will be hard-coded.
Kajoo’s new canvas now has a Rich Text element. When deployed to Sitecore, all Rich Text Elements will render as Rich Text Fields. Adding the Rich Text element also allows users to bind Rich Text Elements to Rich Text fields when projects are bound to existing Sitecore Templates.
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 positioning. Freestyle uses absolute positioning in CSS in addition to top, left, right, bottom values.
The password creation/confirmation screen now has Kajoo branding.
In configuration settings for head deployment, the FTP password field and SSH Private key fields are now hidden.
From the Deployments page, you can see the logs for each attempted deployment. Additionally, you can download the generated code from each deployment, even if you had selected the “Check-In” or “Deploy” options in the publishing wizard.
Users with the Org Admin role can now see all projects in their organization on the projects page, as well as all site configurations in their organization in the Configurations page.
The Projects screen has been redesigned to give users a more multifaceted view of the projects that are available to them.
Now, build errors will appear with details in the notifications center.
The New Project menu text has been updated to be clearer. For example, “Create From Sketch” has been altered to say “Convert a Hand-Drawn Wireframe” in order to prevent confusion about utilization of the software known as Sketch, which is not currently supported with Kajoo.
All the basic features you expect from canvas are present on the new canvas, including Zoom, Redo/Undo, and Project Sharing.
All of your favorite Kajoo styling functionality, including our advanced styling rules, the css editor, background images for containers, and custom themes and variants, are available in the new canvas.
The new Canvas also supports existing functionality around publishing projects, including code download, checking in to github, and deployment to Sitecore.
The elements menu in the new canvas is revamped, offering a new organization of elements. Elements in this menu can be simply dragged onto the canvas and dropped.
This was a fix pushed out for 1.1, for which there was an issue where roles were not automatically assigned to users after signup.
