A modern, lightweight frontend framework for building component-based web applications
Project description
Snakeskin
Snakeskin is a modern, lightweight frontend framework/library designed to make building component-based web applications fast, flexible, and enjoyable. It integrates seamlessly with Tailwind CSS and Bootstrap, and provides a CLI tool to scaffold, run, and build projects effortlessly. Snakeskin is designed to be AI-ready and backend-friendly for future integrations
Features
- Component-Based Architecture: Build reusable UI components easily.
- State Management: Reactive state system with lifecycle hooks.
- Tailwind CSS & Bootstrap Integration: Style your apps with your favorite frameworks.
- CLI Tooling:
snakeskin create <project-name>→ Scaffold a new projectsnakeskin dev→ Start a local development server with hot reloadsnakeskin build→ Generate production-ready build
- Fast Development & Deployment: Optimized build system and CLI for Vercel/Netlify deployments.
- Future-Ready: Planned support for backend integrations, AI models, and databases.
Installation
pip install snakeskin-xplnhub
For development features including hot reload:
pip install snakeskin-xplnhub[dev]
For Bootstrap integration:
pip install snakeskin-xplnhub[bootstrap]
Note: Snakeskin is written in Python and provides a lightweight frontend runtime. Future versions may include a full JS/TS runtime for advanced features.
Quick Start
1. Create a New Project
snakeskin create my-landing-page
cd my-landing-page
2. Add Components
# src/components/Hero.py
from snakeskin.framework import Component
class Hero(Component):
def __init__(self, **props):
super().__init__(**props)
self.state = {
"clicked": False
}
def handle_click(self):
self.set_state({"clicked": not self.state.get("clicked", False)})
def render(self):
button_class = "bg-blue-500 text-white px-6 py-3 rounded hover:bg-blue-600"
if self.state.get("clicked", False):
button_class = "bg-green-500 text-white px-6 py-3 rounded hover:bg-green-600"
return f"""
<section class="text-center py-20 bg-gray-100">
<h1 class="text-5xl font-bold mb-4">Welcome to Snakeskin</h1>
<p class="text-gray-600 mb-6">Build modern web apps effortlessly.</p>
<button class="{button_class}" onclick="handleClick_{id(self)}()">
Get Started
</button>
<script>
function handleClick_{id(self)}() {{
console.log("Button clicked");
// In a real app, you would use AJAX or WebSockets
}}
</script>
</section>
"""
3. Compose Components
# main.py
from src.components.Navbar import Navbar
from src.components.Hero import Hero
from snakeskin import BootstrapIntegration
# Initialize components
navbar = Navbar(title="Snakeskin")
hero = Hero()
# Mount components to activate lifecycle hooks
navbar.mount()
hero.mount()
# Create HTML content
html_content = f"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snakeskin Landing Page</title>
<link href="dist/tailwind.css" rel="stylesheet">
</head>
<body>
{navbar.render()}
{hero.render()}
</body>
</html>
"""
# Add Bootstrap if needed
# html_content = BootstrapIntegration.include_in_template(html_content, "both")
# Write to file
with open("dist/index.html", "w") as f:
f.write(html_content)
4. Run Development Server
snakeskin dev
- The browser will automatically open to
http://localhost:3000/dist - Changes to your files will trigger hot reload
5. Build Production Version
snakeskin build
- Optimized static files are generated in the
distdirectory - CSS is minified and assets are optimized
Folder Structure
my-landing-page/
├── src/
│ └── components/ # Your UI components
├── dist/ # Build output directory
├── input.css # Tailwind CSS input file
├── main.py # Main application entry
├── tailwind.config.js # Tailwind configuration
Styling
- Tailwind CSS: Fully integrated with automatic processing and hot reload
- Bootstrap: Available through the
BootstrapIntegrationhelper - Use CSS classes directly in
render()for rapid UI design - See the Styling Guide for more details
CLI Commands
| Command | Description |
|---|---|
snakeskin create <project-name> |
Scaffold a new project |
snakeskin dev |
Start local development server with hot reload |
snakeskin build |
Build production-ready static files |
| `snakeskin deploy <vercel | netlify>` |
Deployment
Snakeskin projects can be deployed to popular hosting platforms:
Vercel Deployment
snakeskin deploy vercel
See Vercel Deployment Guide for detailed instructions.
Netlify Deployment
snakeskin deploy netlify
See Netlify Deployment Guide for detailed instructions.
Future Roadmap
- Backend Integration: REST API / GraphQL / Database support
- AI Integration: Connect components to OpenAI, Gemini, etc.
- SSR & Hydration: Server-side rendering for performance
- Plugin System: Extend framework functionality easily
- TypeScript Support: Type-safe frontend development
Contribution
Snakeskin is open source and welcomes contributions!
- Fork the repository
- Create a branch for your feature/fix
- Submit a Pull Request with a detailed description
- Ensure code passes tests and follows style guidelines
License
This project is licensed under the MIT License – see the LICENSE file for details.
Acknowledgements
Inspired by React, Vue, Svelte, and Astro, Snakeskin brings modern frontend best practices into a lightweight, flexible, and developer-friendly framework.
Documentation
For more detailed documentation, check out the following guides:
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file snakeskin_xplnhub-1.0.2.tar.gz.
File metadata
- Download URL: snakeskin_xplnhub-1.0.2.tar.gz
- Upload date:
- Size: 13.6 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
73277fcb9ddc87f88ecc49e0b2c508509252daf1f1f21585bddcc390cd583aa4
|
|
| MD5 |
cd340744f499b032fc1506bb327b4410
|
|
| BLAKE2b-256 |
c81bbb92c0358069d82fd844c37f23919cf766b5d7633e09b7dcde976a78d398
|
File details
Details for the file snakeskin_xplnhub-1.0.2-py2.py3-none-any.whl.
File metadata
- Download URL: snakeskin_xplnhub-1.0.2-py2.py3-none-any.whl
- Upload date:
- Size: 12.4 kB
- Tags: Python 2, Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
93f533726de109743b6737ef0bf015942400d214eb00fc591e433df4ee16033b
|
|
| MD5 |
a42a333fa3b2a15447443709ad0e8ef3
|
|
| BLAKE2b-256 |
bdc170bece46320ce5ea9ba99cf2b7b1853335d08bd835be52dbea907c3b474a
|
