flask-editablesite
🥈SilverFlask Editable Site is a template for building small marketing websites in Flask with live-editable content. Marketing teams benefit from in-place editing of text, images, and other content types. It connects to Flask-based web applications and integrates with content management workflows.
10040Updated 1mo ago
Intermediate30min to implementmarketing
Saves ~180 min per use
Quick InstallView Source
git clone https://github.com/Jaza/flask-editablesite.gitWorks with:
Claude
Overview
About This Skill
Flask Editable Site is a template for building small marketing websites in Flask with live-editable content. Marketing teams benefit from in-place editing of text, images, and other content types. It connects to Flask-based web applications and integrates with content management workflows.
Setup & Installation
Quick Install
No install command available. Check the GitHub repository for manual installation instructions.
Alternative Install (Git Clone)
git clone https://github.com/Jaza/flask-editablesiteRequirements
- Claude Code or compatible AI agent
- Works with: Claude
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Create a new marketing page for [PRODUCT] using Flask Editable Site. The page should include [FEATURES] and a call-to-action button. Ensure the content is editable in-place for the marketing team. Provide the necessary Flask routes and templates.
Example Output
To create a new marketing page for 'CloudSync Pro' using Flask Editable Site, follow these steps:
1. **Create the Flask Route**:
```python
@app.route('/cloudsync-pro')
def cloudsync_pro():
return render_template('cloudsync_pro.html')
```
2. **Design the Template**:
```html
<!DOCTYPE html>
<html>
<head>
<title>CloudSync Pro - Seamless Cloud Storage</title>
</head>
<body>
<h1>CloudSync Pro</h1>
<p>Experience seamless cloud storage with CloudSync Pro. Our advanced features ensure your data is always secure and accessible.</p>
<img src="{{ url_for('static', filename='cloudsync_pro.jpg') }}" alt="CloudSync Pro">
<button onclick="location.href='https://example.com/signup'">Sign Up Now</button>
</body>
</html>
```
3. **Enable In-Place Editing**:
```html
<p editable="text" contenteditable="true">Experience seamless cloud storage with CloudSync Pro. Our advanced features ensure your data is always secure and accessible.</p>
<img editable="image" src="{{ url_for('static', filename='cloudsync_pro.jpg') }}" alt="CloudSync Pro">
```
4. **Save the Changes**:
```python
@app.route('/save', methods=['POST'])
def save_changes():
data = request.get_json()
# Save the data to the database or file
return jsonify({'status': 'success'})
```
This setup allows the marketing team to edit the text and images directly on the page, ensuring the content is always up-to-date and relevant.Apply to these tools
Browse all toolsFind the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan