Rapid Prototyping with Flask, Bootstrap and Secutio

• secutio

  4 2 9.1 JavaScript

  Makes the difficult parts easy. It's like htmx but different!

Secutio is a project in the early stages of development with the goal of simplifying the creation of dynamic content in a straightforward manner. The vision is that anyone should be able to build a web application using only HTML, stylesheets, and a JSON structure where "tasks" are specified.

• htmx

  565 32,656 9.6 JavaScript

  </> htmx - high power tools for HTML

  

The example outlined in this article mimics the "click to edit" functionality found in the htmx framework. Similar to htmx, this framework offers a method to enable inline editing of all or part of a record without the need for a page refresh.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Bootstrap

  530 167,414 9.6 JavaScript

  The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

  

To make the demo more interesting, we will use the Bootstrap framework and Flask as the backend.

• Flask

  135 66,350 8.7 Python

  The Python micro framework for building web applications.

  

#!/usr/bin/python # # https://flask.palletsprojects.com/en/3.0.x/installation/ # from flask import Flask, jsonify, request contacts = [ { "id": "1", "firstname": "Lorem", "lastname": "Ipsum", "email": "[email protected]", }, { "id": "2", "firstname": "Mauris", "lastname": "Quis", "email": "[email protected]", }, { "id": "3", "firstname": "Donec Purus", "lastname": "Purus", "email": "[email protected]", } ] app = Flask(__name__, static_url_path='', static_folder='public',) @app.route("/contact//save", methods=["PUT"]) def save_contact(id): data = request.json contacts[id - 1] = data return jsonify(contacts[id - 1]) @app.route("/contact/", methods=["GET"]) @app.route("/contact//edit", methods=["GET"]) def get_contact(id): return jsonify(contacts[id - 1]) @app.route('/') def root(): return app.send_static_file('index.html') if __name__ == '__main__': app.run(debug=True)

Suggest a related project