Perform CRUD operations using Xano

How to Clone?

Follow all these steps to clone the web app:

  1. Clone the Webflow website
  2. Clone the Wized project, and paste the Wized embed code into the cloned Webflow website
  3. Clone the Xano backend, and get your API key
  4. Update your API key in My Apps inside the Wized Configurator

Walkthrough tutorial

If you have any questions, please reach out to Support.

  1. Add Xano in the My Apps panel.
  2. Build a Data Out request to CREATE item. Next, in the Actions panel, build an on-click trigger (applied to the relevant form-submit button) that executes the CREATE item request.
  3. Go to Page Data > General > Variables > +New.  
  4. Build a Data In request to READ items that's triggered on page load. Next, in Actions panel, build a Render List configuration that displays all the items loaded in the READ request & use the newly created variable as the index. Then, build more Actions (such as replace text) to display properties of the loaded data, using the created variable as the index.
  5. Create Actions to pre-fill values of the item (using the created variable as the index) in the input fields. Next, build a Data Out request to UPDATE item using the created variable as the index. Then, in Actions panel, build an on-click trigger (applied to the relevant form-submit button) that executes the UPDATE item request.
  6. Build a Data Out request to DELETE item. Finally, in the Actions panel, build an on-click trigger (applied to the relevant button) that executes the DELETE item request using the created variable as the index.

Additional information

  • Webflow is used to build the web app UI, including the interaction.
  • Wized is used to transform the UI into a functional web app component.
  • For this project, Xano is used as the backend.