Scriptly⚡

Scriptly is a modern, interactive web-based code playground and portfolio project that allows developers to write HTML, CSS, and JavaScript with a live preview, built using a clean IDE-style interface and a video-enhanced landing page.

It is designed to feel like a real developer tool — fast, minimal, and intuitive.

---

Live Demo

🔗 https://shreeja-88.github.io/scriptly/

---

Features

Interactive IDE

• Separate editors for HTML, CSS, and JavaScript
• Live preview rendering
• Built-in console for logs and errors
• Run code manually or automatically

Modern UI & UX

• Dark IDE-inspired theme
• Animated buttons and smooth transitions
• Responsive layout for all screen sizes
• Accessibility-friendly motion handling

Video-Enhanced Landing Page

• Hero section with looping background video
• Gradient overlays for readability
• Smooth scroll-based animations
• Fully responsive design

Developer Experience

• Keyboard shortcut support (planned)
• Auto-save and export-ready structure
• Clean, readable vanilla JavaScript code

---

Tech Stack

• HTML5
• CSS3 (Flexbox, Grid, Animations)
• Vanilla JavaScript
• MP4 video backgrounds
• No frameworks — fully custom-built

---

Project Structure

scriptly/
│
├── index.html # Landing page
├── ide.html # Interactive IDE
├── style.css # Global styles
├── script.js # IDE logic
├── assets/
│ ├── hero-bg.mp4 # Background video
│ └── preview.png # Screenshot
└── README.md

---

How to Run Locally

1. Clone the repository:

   git clone https://github.com/Shreeja-88/scriptly.git
   

2. Open the project: cd scriptly

3. Run: Open index.html in your browser Click Launch IDE

No build tools or dependencies required.

Purpose of This Project

Scriptly was built to:

• Practice real-world frontend development

• Build a developer-focused product UI

• Demonstrate DOM manipulation, state handling, and animations

• Serve as a portfolio project for internships and placements

Author

• Shreeja Hebbar
• Frontend & Web Development Enthusiast

Support

If you like this project, consider giving it a ⭐ — it really helps!