Request for Comments – Adding support for Mock Previews in Extensions

Hello community!

I'm super excited to announce that I will be working on adding support for mock previews in extensions under Google Summer of Code this year! I'm here to gather your opinions and feedback about the project.

Mock previews are the dummy representation of visible components you see inside the designer when you drag and drop them. They are a crucial aspect of App Inventor's no-code philosophy, allowing you to visualize your apps' UI without having to go through a whole compilation process.

However, extensions currently cannot have mock previews. My goal this summer would be to fix this and make it possible for extensions to have mock previews.

I have created a design document for the project. It documents the low-level design details of the project, as well as gives you an idea of what creating mocks would look like for an extension developer. This is your call for participation, especially if you're an extension developer. Now is the opportunity to give your feedback and influence the design of the mocks API!

Here are some notable questions from the above document I'd love your opinions on:

  1. What are your thoughts on the proposed JavaScript API for creating mocks?
  2. Do you see any security flaws in the proposed solution? (Especially with the mocks having the ability to make network calls.)
  3. What would you use mocks for in your extensions?
  4. How should we go about adding support for external CSS?



Hi @shreyash
All the best with your project.

Would it be an idea to put two extensions in you Google Document, one without the mock code and one with the mock code? Then it would be easier to compare the two and see what extra work it would give an extension developer.


I'm excited about mock previews for extensions!

I also agree here.

1 Like

I've purposefully decided not to include that since things are in flux now and will likely change in the future. I will publish a detailed doc for extension devs by the end of the project.

However, there's not a whole lot that is going to change. Extension devs will only need to mark their extension as a visible component and add a mock file to it (discussed in detail in the DD). This mock file may live in the aiwebres directory where you store the extension's icon, but yeah, that could change.