Visual code editor for visually developing features in applications

A non-transitory computer-program product for developing features for an application, the computer program product comprising computer-readable instructions, the instructions when executed by a processor cause the processor to:

• provide a graphical user interface, the graphical user interface comprising a preview section and a feature panel, wherein the feature panel is configured to display a code snippet for providing the feature for the application and the preview section is configured to preview a runtime behavior of the code snippet;
• select a controller file and a plug-in associated with the feature, wherein the controller file handles an event for the application, and wherein the plug-in provides selectable metadata associated with the feature, wherein the selectable metadata includes an input parameter supported by the plugin function;
• responsive to selecting the controller file:
• select an event handler, wherein the event handler provides an interface between the controller file and the event;
• display the selectable metadata associated with the plug-in;
• and
• receive a value associated with the selectable metadata;
• generate a code snippet based on the controller file, the event handler, and the value;
• display the code snippet in the feature panel of the graphical user interface;
• inject the code snippet into the preview section of the graphical user interface,
• simulate the runtime behavior of the code snippet based on the injected code snippet;
• display the runtime behavior of the code snippet within the preview section of the graphical user interface;
• retrieve a plugin function associated with the plugin, wherein the plugin function is retrieved from a repository;
• display plugin information related to the plugin function in the feature panel of the graphical user interface, wherein prior to generating the code snippet:
• retrieve a code template from the repository based on the controller file, the plugin, and the plugin function, wherein the code snippet is generated based on the controller file, the event handler, the value, and the code template.

A system for developing a feature for an application comprising:

• a memory configured to store metadata related to the feature;
• and
• at least one hardware processor coupled to the memory and configured to:
• provide a graphical user interface, the graphical user interface comprising a preview section and a feature panel, wherein the feature panel is configured to display a code snippet for providing the feature for the application and the preview section is configured to preview a runtime behavior of the code snippet;
• select a controller file and a plug-in associated with the feature, wherein the controller file handles an event for the application, and wherein the plug-in provides selectable metadata associated with the feature;
• responsive to selecting the controller file:
• select an event handler, wherein the event handler provides an interface between the controller file and the event;
• display the selectable metadata associated with the plug-in;
• and
• receive a value associated with the selectable metadata;
• generate a code snippet based on the controller file, the event handler, and the value;
• display the code snippet in the feature panel of the graphical user interface;
• inject the code snippet into the preview section of the graphical user interface,
• simulate the runtime behavior of the code snippet based on the injected code snippet;
• display the runtime behavior of the code snippet within the preview section of the graphical user interface;
• retrieve a plugin function associated with the plugin, wherein the plugin function is retrieved from a repository;
• display plugin information related to the plugin function in the feature panel of the graphical user interface, wherein prior to generating the code snippet:
• retrieve a code template from the repository based on the controller file, the plugin, and the plugin function, wherein the code snippet is generated based on the controller file, the event handler, the value, and the code template.