Real-Time Image Editor with Vanilla JavaScript & Canvas API

🚀 Built a Browser-Based Image Editor using JavaScript & Canvas Excited to share my latest project — a Web-Based Image Editor built with HTML, CSS, and JavaScript using the HTML5 Canvas API. The goal of this project was to understand how image manipulation works directly in the browser and how filters can be applied dynamically. 🔧 Key Features: • Upload and edit images directly in the browser • Adjustable filters using sliders (Brightness, Contrast, Saturation, Blur, Hue-Rotate, Sepia, Grayscale, Opacity, Invert) • Real-time image rendering using the Canvas API • Built-in filter presets like Vintage, Drama, Cool, Warm, Noir • Reset filters instantly • Download the edited image with one click ⚙️ Technologies Used: HTML • CSS • JavaScript • Canvas API 💡 What I Learned: • Working with the HTML Canvas API • Dynamic DOM creation using JavaScript • Managing filter states with objects • Applying CSS filter effects programmatically • Building interactive UI components This project helped me strengthen my JavaScript fundamentals and DOM manipulation skills. I’m currently building more frontend and full-stack projects to improve my development skills. #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #CanvasAPI #Projects #LearningInPublic

I just built my first Image Editor using Vanilla JavaScript + HTML5 Canvas API 🎨 Instead of relying on frameworks, I went fully vanilla, which forced me to understand what’s really happening under the hood. Here are a few key things I learned along the way: 🔹 Canvas Manipulation I learned how to render images onto a <canvas> and apply real-time effects using canvasCtx.filter like Hue-Rotate, Invert, and Blur. 🔹 State Management (without React 😅) Managing 9+ filters manually taught me how state actually works. Every slider change recalculates and rebuilds the entire filter string in real time. 🔹 Dynamic UI Sync Built a preset system (Vintage, Dreamy, etc.) where selecting a preset updates both the image AND all sliders — keeping UI and data perfectly in sync. 🔹 File API & Exporting Handled image uploads and used canvas.toDataURL() to convert the canvas into a downloadable PNG — turning browser work into real output. 🛠 Tech Stack: • JavaScript (ES6+) • HTML5 Canvas API • Custom CSS Variables (Dark Mode) • Remixicon CDN This project gave me a whole new appreciation for tools like Canva and Photoshop — a lot more is happening behind the scenes than we think. 🎥 Check out the demo video below to see it in action! #WebDevelopment #JavaScript #FrontendDevelopment #CanvasAPI #BuildInPublic #LearningByDoing

I Built a Browser Based Image Editor with JavaScript I recently built a simple image editor using vanilla JavaScript and the Canvas API to understand how image manipulation works directly in the browser. Instead of relying on libraries, I wanted to explore how filters and transformations can be applied in real time using JavaScript. 🔗 Live Demo https://lnkd.in/dCjQn4mF 💻 GitHub Repository https://lnkd.in/dh2RYjMK Features • Upload an image from your device • Adjust filters like brightness, contrast, saturation, grayscale, sepia, blur, hue rotate, invert, and opacity • Apply preset filters such as Vintage, Cool, Warm, Dramatic, Black and White, and Soft • Reset filters instantly • Export the edited image directly from the browser How It Works The project uses the HTML Canvas API to render the uploaded image and applies dynamic filters using the canvas filter property. Sliders and preset buttons update the filter values in real time, allowing the image to change instantly. What I Learned • Working with the Canvas API • Real time image manipulation in JavaScript • Managing UI state for filters and presets • Exporting images using canvas data URLs Building small tools like this is a great way to understand how frontend features actually work behind the scenes. Would love to hear your feedback or suggestions for improvements. Daneshwar Verma Ritik Rajput Devendra Dhote Sheryians Coding School #WebDevelopment #JavaScript #FrontendDevelopment #BuildInPublic #LearningInPublic

🚀 Just Built a Live Code Editor in the Browser! Share my latest mini project — a Live HTML, CSS & JavaScript Editor 💻✨ 🔹 Real-time preview using iframe 🔹 Clean dark/light theme toggle 🌗 🔹 One-click copy & download 🔹 Fully responsive layout 📱 🔹 Preloaded landing page template to get started instantly This project helped me sharpen my skills in: ✔️ DOM manipulation ✔️ UI/UX design ✔️ JavaScript event handling ✔️ Responsive layouts 💡 It’s amazing how powerful pure HTML, CSS, and JavaScript can be without any frameworks! Would love your feedback and suggestions 🙌 What feature should I add next? 🤔 #WebDevelopment #JavaScript #Frontend #Coding #BuildInPublic #Developer #HTML #CSS #Editor #LiveEditor #MiniProject #VEDESH

🚀 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 & 𝗦𝗵𝗮𝗿𝗶𝗻𝗴 — 𝗣𝗼𝘀𝘁 #𝟭𝟬 🎯 𝗙𝗼𝗰𝘂𝘀𝗲𝗱 𝗗𝗼𝗺𝗮𝗶𝗻: 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁 — 𝗣𝗼𝘀𝘁 #𝟭𝟬 Built a Browser-based 𝗜𝗺𝗮𝗴𝗲 𝗘𝗱𝗶𝘁𝗼𝗿 from scratch — no libraries, no frameworks. Pure HTML, CSS & 𝗩𝗮𝗻𝗶𝗹𝗹𝗮 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁. And honestly, this one taught me more than I expected. 🛠️ 𝗪𝗵𝗮𝘁'𝘀 𝗜𝗻𝘀𝗶𝗱𝗲: ✅ 9 Real-time Filters — brightness, contrast, blur, grayscale, sepia & more ✅ 10 One-click Presets — drama, noir, cyberpunk, vintage & more ✅ Drag & Drop image upload ✅ Live filter preview on Canvas API ✅ Download edited image as PNG ✅ Clean animated dark UI 𝗡𝗼 𝗳𝗶𝗹𝘁𝗲𝗿 𝗹𝗶𝗯𝗿𝗮𝗿𝘆. 𝗡𝗼 𝘀𝗵𝗼𝗿𝘁𝗰𝘂𝘁𝘀. 𝗝𝘂𝘀𝘁 𝘁𝗵𝗲 𝗳𝘂𝗻𝗱𝗮𝗺𝗲𝗻𝘁𝗮𝗹𝘀 — 𝗮𝗻𝗱 𝘁𝗵𝗮𝘁'𝘀 𝘁𝗵𝗲 𝗽𝗼𝗶𝗻𝘁. 💡 𝗪𝗵𝗮𝘁 𝗜 𝗟𝗲𝗮𝗿𝗻𝗲𝗱: Canvas API is something most frontend devs skip — but it's powerful. Drawing images, applying CSS filters programmatically, converting canvas to downloadable PNG — when you do it manually, it actually clicks. Also used 𝗖𝗹𝗮𝘂𝗱𝗲 as my learning partner throughout — not to write code for me, but to understand why each line works. Big difference. Still in my 6th semester, still learning, 𝗰𝗼𝗻𝘀𝗶𝘀𝘁𝗲𝗻𝗰𝘆 𝗶𝘀 𝘁𝗵𝗲 𝗴𝗼𝗮𝗹 — 𝗜𝗻𝘀𝗵𝗮𝗔𝗹𝗹𝗮𝗵. Would love feedback from seniors and fellow devs! 💬 #JavaScript #WebDevelopment #VanillaJS #HTML #CSS #CanvasAPI #ImageEditor #LearningInPublic #Frontend #BuildInPublic

I Made a Spinning Like Button and It's Simple #frontend #coding #shorts In this project, we build an interactive like button using HTML, Tailwind CSS, and JavaScript. When clicked, the button spins once and toggles between an outline and a filled heart icon. This short tutorial demonstrates how to combine custom CSS animations, event listeners, and DOM manipulation to create smooth, engaging UI interactions. Perfect for beginners learning how to add fun animations to their projects. Features - Interactive like button with toggle effect. - Custom spin animation using CSS keyframes. - Event listener to detect clicks and update the icon. - DOM manipulation to swap between outline and filled images. - Tailwind CSS utilities for layout and transitions. - Beginner‑friendly code with minimal setup. Connect with me YouTube: https://lnkd.in/gAtk9suf LinkedIn: https://lnkd.in/gu-ZN9dB Facebook: https://lnkd.in/gsV-S_sh Instagram: https://lnkd.in/gEUR34hP TikTok: https://lnkd.in/gQvUEgSq GitHub: https://lnkd.in/gTcg6vFt Subscribe for more creative coding demos, Canvas tutorials, and short projects optimized for social platforms 🚀 #javascript #html #tailwindcss #coding #shorts #webdevelopment #frontend #dom #codingforbeginners #learnjavascript #interactiveui #frontendproject #htmlcssjavascript #codingtutorial #simpleprojects #jsbasics #likebutton #creativecoding #webdesign #dynamicui #webdevproject #cssanimation

🚀 Excited to Share My New Project: Auto Text Generator! I recently built a simple yet powerful Auto Text Generator using HTML, CSS, and JavaScript 💻 🔹 What it does: This project automatically types and displays text on the screen, creating a dynamic “typing effect” — perfect for landing pages, intros, or creative UI designs. 🔹 Tech Stack: ✔️ HTML – Structure ✔️ CSS – Styling & animations ✔️ JavaScript – Logic for auto typing effect 🔹 Key Features: ✨ Smooth typing animation ✨ Customizable text speed ✨ Easy to integrate into any website ✨ Beginner-friendly and lightweight 🔹 What I learned: This project helped me strengthen my understanding of DOM manipulation, timing functions (setTimeout / setInterval), and creating interactive UI elements. 💡 Small projects like this are a great way to sharpen frontend development skills and build a strong portfolio. 👉 I’d love your feedback and suggestions to improve it further! 🚀 Here check my GitHub repo: 🔗 https://lnkd.in/gCz98WpX 🚀 Day 13 of #100DaysOfCode #WebDevelopment #JavaScript #FrontendDevelopment #HTML #CSS #Projects #Coding #Learning

💡 Interactive Light Bulb with Click Sound using HTML, CSS & JavaScript 🔊 Ever wanted to bring a simple UI idea to life with a touch of realism? I recently built a fun mini-project where a light bulb turns ON and OFF with a click — complete with a satisfying switch sound! ⚡ Here’s what this project covers: 🔹 HTML – Structure for the bulb and switch 🔹 CSS – Styling the bulb glow effect and smooth transitions 🔹 JavaScript – Handling click events and toggling states 🔹 Sound Integration – Adding a realistic click sound for better user experience ✨ Key Features: Toggle light ON/OFF with a single click Visual glow effect when the bulb is ON Realistic click sound for interaction feedback Beginner-friendly and great for practicing DOM manipulation 🚀 This is a great project if you're starting with JavaScript and want to understand how interactivity works in real-world UI elements. 💻 Concept: Use an image or div for the bulb Toggle a CSS class on click Play audio using JavaScript when switching states Small projects like these make learning fun and practical! If you'd like, I can share the full code snippet as well. Let me know in the comments! 👇 🚀 Here Check my GitHub repo: 🔗 https://lnkd.in/g6MgHkh2 🚀 Day 19 of #100DaysOfcode #WebDevelopment #JavaScript #HTML #CSS #Frontend #CodingProjects #LearningByDoing

Pretext Pure JavaScript/TypeScript library for multiline text measurement & layout. Fast, accurate & supports all the languages you didn't even know about. Allows rendering to DOM, Canvas, SVG and soon, server-side. https://lnkd.in/e2X3Eev2

For 25 years, styling the native <select> element was nearly impossible. We all reached for JavaScript libraries just to get a decent dropdown. Not anymore. With appearance: base-select in Chrome 134+, you can now fully customise the native <select> -- rich options with images, icons, custom colours, and smooth animations. No JavaScript needed. In my latest article, I walk through how to build a beautiful, accessible custom select using only HTML and CSS. Read the full article: https://lnkd.in/ekVWjwqr #CSS #HTML #WebDevelopment #Frontend #Accessibility #BaseSelect #WebDesign #UXEngineering