Releases: buildwiththeta/buildwiththeta
Theta Madrid 1.3.0
Textfield and switch
Our first input widgets such as textfield and swift are finally available. This is the beginning for creating interactive UIs with Theta.
Of course, you can use the onChanged method in Workflows.
Blur effects
You can set blur effects in all elements. We support two types of blur effects:
- Layer blur: Applies the blur effect to the element itself (and its children).
- Background blur: Applies the effect behind the element.
Masks and blend modes
Now all elements can become masks and can have different blend modes. This is quite useful if you want to create complex UIs such as the new Apple Music screen in which there is a full-screen image with a gradient blur effect from below.
This is typically a layout that is considered very complex in the Flutter world, and we are proud that it will be possible to create it in minutes with Theta.
Multi nodes selection
We have integrated a method to select multiple items together in order to edit, copy, paste and delete them all at the same time.
- Select a node by holding down Cmd (or Control on Windows) to just the node and add it to the multiple selection.
- Select a node by holding SHIFT to select both the node and all its children.
Fixes
Theta Stockholm 1.1.0
Embedding in websites
You can embed your design into any website, including those made with Wordpress, Framer, Webflow, etc.
The embed system will also follow an iframe embed method, which is easier for the uninitiated to integrate.
In addition, we are actively working on a React package for Theta.
50% faster than ever
We have made the Theta Flutter library lightweight, loading 50% faster than before.
In addition, styles and multiple components can be loaded in parallel.
Improved dependencies
We have made some important updates to the Theta Flutter library, removing several packages that are no longer used.
This will increase the performance of your applications.
Integration of flying controls
We are deploying custom flying controls for each node.
This will help you change the information of the basic elements with one click, without having to navigate the right bar.
New controls for Columns and Rows
MainAxisAlignment and CrossAxisAlignment now have new controls with easy-to-use drop-down menus.
Clean Homepage
We are working hard to improve the overall UI/UX of Theta. We have cleaned up the homepage, making it more minimal and user-friendly.
Theta NYC 1.0
Introducing remote A/B testing
Do you like to modify remote components to improve your conversions and increase sales? You'll love being able to establish A/B tests on your components directly from your dashboard, with immediate effect on your apps without releases.
A/B tests have been made so that they are assigned to individual nodes, to which you can add variants to see instead.
This way, you can do A/B tests with multiple variants at the same time, amplifying your tests.
Download the macOS app for better performance and advanced features.
Starting today, we are inaugurating a new development process through Theta's macOS app. It will allow you to enjoy Theta at a significantly faster speed, with future advanced features exclusive to this platform.
I think this will help so much for those who use Theta for a long time every day.
Continue with Google
We have added the ability to log in using a Google account.
With the occasion, we have updated the login page to which we will add a remote component made in Theta for A/B testing on this page.
Duplicate components.
You can quickly duplicate all components so you can create variants quickly or start new components already from a ready base.
REST API improvements
We are reducing the time required for the "get_component" API by 50%. We are working on a superfast API of 50 ms.
You will see changes in the coming days.
Theta use case
We are using remote paywalls built with Theta--in Theta! And they are helping us improve our conversions.
Personal note (Andrea):
I met via Zoom with Doc Williams, which is very important to me since I am a big fan of his. We talked about Theta and I couldn't be happier.
Theta Helsinki 0.6
⚡️ Add the power of generative AI to your projects
Achieve superfast user interface testing at the speed of typing with generative AI
We are really proud to announce Theta AI, our generative AI add-on for generating new components or alternatives to existing ones.
Theta AI will arrive in early fall.
Pre-orders open for Pro and Enterprise users! ⚡️
Pre-order for Pro and Enterprise users: https://pay.buildwiththeta.com/b/9AQbKx5r04dE6VqfZ1
For new users (Theta Pro + AI add-on) https://pay.buildwiththeta.com/b/5kAbKxbPobG67ZuaEG
Multi view canvas
See, edit and have everything under control on any device at the same time.
This is an acceleration of 5 times the classic single-device viewing.
New UI blocks: Spacer, SVG, Lottie
We have added some new UI blocks to unleash your creativity:
- Spacer, an element for creating automatic spaces within a column or row.
- Lottie, for interactive components.
- SVG, for adding any icon or image to the UI.
Project assets library
We have added a resource folder within each project. You can now upload from your own computer:
- images
- icons
- svg
- custom fonts
Remember: assets will be download locally in case you use a preloading system within Theta (for offline user interfaces).
Other improvements
Custom fonts
Add your own custom fonts.
Please note: we support .ttf formats with this version, but we will soon expand support to new formats.
Random Lorem Ipsum option
Automatically generates random Lorem Ipsum with one click, thanks to a dedicated button within the Text control. Useful for rapid prototyping.
Hover effect
Highlight what you are pointing to with the mouse/pointer.
Highlight UI blocks (blue) and components (magenta) in different colors.
Fix: Now items can be moved correctly to screens that are not mobile
SwiftUI
The SwiftUI library is coming in the next few weeks.
You can follow its development here: https://github.com/buildwiththeta/buildwiththeta-swift
Theta Tokyo 0.5
ようこそ！ Introducing pre-loading without internet connection and reactive state changes in Theta Tokyo (0.5)
Introducing pre-loading without the need for an Internet connection, for instant loadings
Everyone's most requested feature has arrived! From now on, it will be possible to use Theta even without an Internet connection, thanks to a pre-loading in the development phase of the app.
Preloading works by locally loading the components and styles of a project.
To make DX as good as possible, we have created for the occasion Theta CLI, which will allow us to save pre-load the styles of a project and its components.
You will still be able to pass a custom file in case you do not want to use the /assets folder
Do you want to know how preload works?
Theta CLI
Theta finally has its own CLI! You can preload components and styles with it. But this is only the first version: projects and account management are coming soon.
Do you want to know how Theta CLI works?
Overrides are now reactive to state changes
Overrides can now be responsive to state changes, creating dynamic interfaces using any state management library.
You can see examples where we combine Theta's remote UI with Bloc, Riverpod and Stacked libraries.
Fetch components from different branches / versions
Looking for true versioning of your components? Don't want to touch old versions of the application?
Now you can use different versions of components using branches.
- Open the Branches to see all your project branches.
- Write a branch name inside
UIBox(‘component name’, branch: “YOUR_BRANCH_NAME”)
Use case?
You already have a published version of your application on the stores.
You want to update the UI with a new button, adding a new workflow.
Since to add a workflow you have to reload the app on the stores, and the user has to update the version to use it (and that doesn't always happen), to avoid having a non-interactive button on previous versions, you can leave the previous version in one branch and add the new UI in another branch, referring to the ids of the different versions of the app.
⚡️ From the community
- @saileshbro has made a Counter app example with Stacked
- @MatB57 is translating our docs in French 🇫🇷
Minor improvements
Connection Modes
We made an improvement to the syntax by introducing the ConnectionModes enum to choose how Theta should connect with the remote UI.
Declare it in initialize() as follows: Theta.initialize(connectionMode: ConnectionModes.preloaded, anonKey: '...').
Allowed values:
continuouscachedpreload
Read component properties from UIBoxController for custom analytics
The UIBoxController exposes additional information about the loaded component, such as the name, id, or branch name. These are useful for tracking which component is being viewed by users.
controller.onLoaded(() async {
await analytics.logEvent(
name: controller.componentName,
parameters: {
'component_id': controller.componentID,
'branch': controller.branch,
},
);
});
UIBox(
‘component name’,
controller: controller,
)New Flutter app examples using Theta [with source-code]
Support us
私たちをサポートするには、スターを付けてください。 To support us, star us. 🌟
Theta London 0.4
Introducing team design libraries, conversion events, and open-source Theta editor. Say hi to Theta London (0.4)! 👋
Team design library
In addition to introducing support for components within other components last week, you can now even share them in a unified team design library accessible by all team projects (and members).
This allows you to have multiple projects with an unified design system at all times.
This feature is available to all free and Pro users with the following features:
- Free tier: up to 5 components in the team library
- Pro: infinite shared components
Conversion events
Starting today, we are inaugurating a new feature set called 'Insights' to better understand when our UI or design system elements are working for users.
To begin, we started with conversion events. These are custom events that you can assign to each node inside the Theta editor, to which you can assign an identifying title.
When a user in the app goes, for example, to click on an element that has a conversion event assigned to it, you will see a log in the Insights panel of the editor, under the heading 'Events'.
This is just the beginning for us of a series of features aimed at understanding how users move within our apps, and then seeing how much they convert based on changes in our UIs.
Having this data then allows us to do design based on data, which is essential if we want to get to optimal conversions.
Open-source Theta UI editor
Do you like using Theta's editor? You'll love seeing how it was written!
From now you will be able to see the source code of our editor inside the 'playground' folder. It is the open-source version of the version hosted at app.buildwiththeta.com.
Inside you will find all the most important logic we use in the official editor, which you can study or use yourself.
The parts that manage users, subscriptions, databases, and anything that is not exclusive to the editor itself are absent.
You can also see it in action right away in our playground: https://playground.buildwiththeta.com
Fixes
- Margin and padding don't work in widgets inside column #169
- Margin is inserted twice #174
- Margin top is inserted on margin bottom #175
- Error deleting a team cause Stripe key #176
- Add the possibility to change the name of widgets #179
- If I delete the Headline text style it still remains selected in the texts when you insert them #181
- Invitation Code Counting and User Joining Issue #187
- Improve 'Export' panel #189
- Branch Merge with new component node #193
Theta Ankara 0.3.0
Introducing the Invite-only Beta program with Theta Ankara 0.3 and Theta Pro
I am very excited to announce Theta Ankara 0.3. It is the beginning of a new part of our adventure, with our new invitation-only beta program and the announcement of Theta Pro, a new plan for serious projects. Keep in mind that Theta Pro is not born by cutting the free level, which remains the same as before.
Embeds components within other components
Finally you can graft multiple components together, creating a complete design system consisting of atoms, molecules, and components.
- Simply drag and drop components from the left 'Components' panel into the current component to add them.
- You can overwrite the text values within each subcomponent, making each component unique and customized.
- You can also convert an existing tree block into a new component.
- Overrides entered within Theta are automatically retrieved in the Flutter library, but you can still overwrite them with local ones.
Complex override system
Now you can use the complex override system to be completely free to mix no-code components to your local code, with your favorite libraries (and in the future even with different frameworks!).
- You can overwrite a single node within all components or choose a node from a particular component instance.
- You can overwrite a single node in the middle of a tree with a custom widget, retrieving the original attributes and child/children properties.
- The new overwriting syntax is clearer and provides more flexibility.
Improved projects security with team’ activity logs
You can see who on your team has made changes to the branches to have more control over the security of the project.
This feature is available in both Theta Pro and Free tier, with different retention.
Other changes
Theta Pro
Theta Pro unlocks a range of powerful features and capabilities. With Theta Pro, you get unlimited components per project, up to 10k monthly renderings included, unlimited branches, branch logs for project history tracking, longer retention of branch backups, and more. Check out our pricing page for all the details.
Invite other people to join the closed beta
With the launch of the invitation-based Beta program, access will no longer be staggered based on the waiting list, but will depend on invitations made by the users themselves. Now everyone will have up to 5 invitations per week to invite your friends, colleagues, or just other people you know who want to see Theta in action. All the people on the waiting list will be invited in the next few days.
Component Fit is now a cloud attribute
Now the ComponentFit is saved directly in the cloud. So there will be no need to set it manually for each UIBox, and it will remain saved in the editor for each component. This is especially useful for managing the behavior of a component and all its instances in other components in one fell swoop.
Project pausing
Projects are now paused after 7 days of inactivity (in the editor or via API). You can reactivate a project within the "Project Settings" panel by editing the "Is public" field. If the project is paused, you will receive an email.
We’ll ask for feedback on the majority of pages
Do you have any suggestions to give us about our UI/UX or just report a bug? You can now use the "Feedback" button on almost every page. https://app.buildwiththeta.com
Theta Flutter library
All of the above changes are already online and supported by version 0.2.1 of the Theta Flutter library.
- Install now: https://pub.dev/packages/theta
Why Ankara?
We dedicated this version to the team member who contributed most to this version (and to our growth): @kasapiniz 💙
Resources
⚡️ Website
🧑🏫 Documentation
🌟 Star us on GitHub
🐦 Twitter
👾 Discord
📝 Read our blog
☄️ Releases
Theta Rome 0.2.1
Team collaboration on same project
Create teams, invite collaborators, and with Theta's collaboration feature you can give your team the ability to create and iterate your products together in the same project across different pages and branches.
Theta's multiplayer feature on the same page will come in the future.
UIBoxController
You can finally control your UIBoxes through a controller, with which you can have component state callbacks, reload when you see fit, and have information about the elements.
final controller = UIBoxController();
controller.onLoaded(() {
debugPrint('Loaded!');
debugPrint(_controller.nodesToList().toString());
});
controller.onError((error) => debugPrint(error.toString()));
UIBox(
'Feed',
controller: controller,
);
controller.dispose();- Pub.dev: https://pub.dev/packages/theta
—-
Improvements
- New color style dialog
- New color picker dialog
- New team settings page
- Invite email for new team members
- Code generation removed from Flutter library
- Less dependencies in Flutter library
Fixes
- [Bug]: Name Branches #161
- [Bug]: Color HEX #160
- Text: Placeholder, fill and function to go to the next line. #159
- Hierarchy: removing the child from the parent #158
- [Bug]: BoxFit doesn't change its value #157
- [Bug]: Images don't work on web #156
- [Bug]: Text color style #152
- [Bug]: I cannot move widgets to the right of the tablet #151
- [Bug]: Text alignment #150
Theta Rome (0.2.0)
Secure Project Management with Branches
In project management and software development, branches are divergent paths within a codebase that enable parallel development and experimentation. With branches, teams can independently make changes, test features, and iterate without disrupting the main project.
In Theta one branch in addition to the main branch is currently permitted, allowing for focused development and collaboration. Users can edit particular components with their nodes within each branch, empowering teams to refine specific project elements. Theta also offers the ability to restore an overwritten main branch, ensuring data integrity.
Key Features:
- Parallel development and experimentation with one additional branch.
- Independent editing of components and nodes.
- Restore overwritten main branch for data integrity.
Documentation: https://docs.buildwiththeta.com/en/studio/branches
Node Overrides with Custom Widgets
You can override each UI block with a Flutter widget by mixing no-code with Flutter.
UIBox(
'Social card',
overrides: [
Override('Post title')
..setText('My beautiful cat')
..setColor(Colors.white, 0.5),
Override('Cover')
..setImage('https://...'),
],
),Assign a custom widget as child of a UIBox
If in the no-code component the element to which you want to overwrite the child already has one, it will be removed and replaced with the one entered by the user via code.
You can also use the UIBox within other UIBoxes. This provides a very high degree of customization.
UIBox(
'Component name',
overrides: [
Override('Element id')
..setChild(UIBox('Other component')),
Override('Element name')
..setChildren([
Text('Child 1'),
Text('Child 2')
]),
],
),Documentation: https://docs.buildwiththeta.com/en/builder/overrides
Auto Layout
We present Auto Layout Mode, a mode that allows components formed from individual blocks to be able to be displayed regardless of screen size, thus without an absolute position. These are super useful for being able to create widgets that can be embedded inside other widgets, thus without the need for absolute position.
An example? A button. Position and customize it wherever you like, if you enable Loose mode it will autonomously position itself in the center of the device.
Stretch alignments will still work, however, allowing you to see how a full-width button widens on different devices.
Documentation: https://docs.buildwiththeta.com/en/studio/component_fit
Minor improvements
New Collection widget (The union between ListView and GridView)
Widget collection is now present, allowing you to create scrollable widgets in the form of lists or grids, with the ability to customize their parameters according to the device, creating dynamic and responsive layouts.
Available at both app.buildwiththeta and the Flutter Library.
Laptop mode
You can now customize your own designs for laptops as well, a middle dimension between tablets and desktops.
This is super useful for creating increasingly accurate designs that work properly on any device/window.
Blocks panel
Listening to feedback, we redid the widget panel, putting in one more similar to other such tools. This allows us to see the entire list of available widgets right away, also allowing us to update them frequently.
Fixes
- Italian docs.
- Turkish docs.
- Undo bad state. #112
- Images or containers must have a predefined, minimum size. #101
- Text styles are small on tablet and desktop. #129
- [Feature]: Request to Add Visibility of Component Feature in Tree List 👁 #122
0.1.2
Introducing 0.1.2
Thank you all for your support. In these two weeks, I especially want to thank the following people their pull requests 💙
This is a Closed Beta release. To register in Theta, join our waitlist.
- Theta Studio 0.1.2 in which we can design UI in minutes.
- Theta Flutter library theta 0.1.1 which renders remote UI dynamically.
Changelog
- Fix: Two or more UIBox in the same page. (#44). (6323fbc)
- Fix: Unexpected deletion of entire scaffold. (#52). (f41040b)
- Fix: JWT token expired while navigating within the app. (#53). (bc255f3)
- Fix: Item deleted if placed in an already full container. (#54). (f41040b)
- Fix: Color gets reset on style changes, icon size gets reset on other style changes. (#56). (8a8be13)
- Fix: Linear gradient fails to change when there are only 2 colors. (#63). (61e7fea)
- Fix: Clicking on UI item and then on left menu makes web app stuck. (#65)
- Fix: The rects in the builder do not resemble those in Studio for desktop and tablet. (#67) (fac0985)
- Fix: Align fixed (#68).
- Fix: Added maxLines in Text (#69).
- Fix: Rectangles return to their default positions/sizes if you do not confirm the rectangle change. (#70) (89bbcff)
- Fix: Border radius control's labels (#73) (1bf290e)