What You'll Build
- A Wordle clone with:
- 5-letter word guessing with 6 attempts
- Color-coded feedback (green, yellow, gray) for each letter
- On-screen keyboard showing used letters
- Win/lose detection with reveal animations
- Share results as emoji grid
- Daily word that changes every 24 hours
Tool: Lovable (no coding needed) Difficulty: Beginner Time: ~25 minutes Coding required: None
You're going to build your own version of Wordle — the viral word game where you guess a 5-letter word in 6 tries. After each guess, every letter is color-coded: green means correct letter in the correct spot, yellow means correct letter in the wrong spot, and gray means the letter isn't in the word at all. It's simple, addictive, and you can share your results as a spoiler-free emoji grid.
This is a fantastic vibe coding project because the game mechanics are well-known and easy to describe. You don't need to explain what Wordle is — you just need to tell the AI what to build, and it knows exactly what you mean. Lovable will handle the word list, the color logic, the keyboard tracking, and the animations. You'll be playing your own Wordle in minutes.
What You Need
The Founding Prompt
Go to lovable.dev and start a new project. Paste this prompt:
Build a Wordle clone — a 5-letter word guessing game. Game board: - 6 rows of 5 letter tiles each (6 guesses allowed) - Each tile is a square with a border, centered on the page - Tiles start empty and fill in as the player types - Current row has a subtle highlight to show it's active - Grid max-width of 350px, centered Gameplay: - Include a built-in word list of at least 200 common 5-letter English words (hardcode the array in the code) - Pick a random word from the list as the target word when the game loads - Player types letters using their keyboard or clicks the on-screen keyboard - Letters appear in the current row from left to right - Backspace removes the last letter in the current row - Enter submits the guess (only if the row has 5 letters) - Only accept valid 5-letter words (check against the word list). Show a brief "Not in word list" shake animation for invalid words. Color feedback after each guess: - Green (#6aaa64): letter is in the correct position - Yellow (#c9b458): letter is in the word but wrong position - Gray (#787c7e): letter is not in the word at all - Reveal the colors one tile at a time from left to right with a flip animation (each tile flips over 300ms with a 200ms delay between tiles) - If a letter appears multiple times in the guess, handle duplicates correctly (only mark as many green/yellow as there are instances in the target word) On-screen keyboard: - Show a QWERTY keyboard below the grid - Each key is a clickable button - After a guess, update key colors: green if confirmed correct position in any guess, yellow if confirmed in word, gray if confirmed not in word - Green overrides yellow (if a letter was yellow in one guess and green in another, show green) - Include wide "Enter" and "Backspace" keys Win/Lose: - If the player guesses correctly, show "Genius!", "Magnificent!", "Impressive!", "Splendid!", "Great!", or "Phew!" based on which guess (1-6) with a bounce animation - If the player fails after 6 guesses, reveal the target word: "The word was: [WORD]" - Show a "Play Again" button that picks a new random word Styling: - Dark theme: #121213 background, white text, #3a3a3c tile borders - Clean, centered layout - Responsive for mobile — keyboard buttons at least 40px wide on mobile
Click Generate and wait for Lovable to build your game.
Step 1: Test the Core Game
Click the preview and start typing a 5-letter word. Press Enter to submit your guess and watch the tiles flip to reveal the colors. Check that green, yellow, and gray are assigned correctly. Try a word with duplicate letters to make sure the logic handles that edge case. Play through a full game to test win and lose states.
Step 2: Add the Share Feature
The share feature is what made Wordle go viral. Let players copy their results as an emoji grid to paste on social media.
Add a "Share" button that appears after the game ends (win or lose). When clicked, copy a text result to the clipboard in this format: Wordle Clone [attempt number]/6 🟩🟨⬛⬛⬛ ⬛🟩⬛🟨⬛ 🟩🟩🟩🟩🟩 Use green square (🟩) for correct position, yellow square (🟨) for wrong position, and black square (⬛) for not in word. Show a brief "Copied to clipboard!" toast message at the top of the screen that fades out after 2 seconds. Do not reveal any letters — only the colored squares.
Step 3: Add a Daily Word Mode
Wordle's magic is the daily word — everyone plays the same puzzle. Add a mode that uses a consistent word based on the date.
Add a "Daily" mode toggle at the top of the page. When Daily mode is on: - Use the current date to deterministically pick a word from the list (use the date as a seed so everyone gets the same word on the same day) - Save the daily game state to localStorage (guesses made, game over state) - If the player returns the same day, restore their game in progress - Show a countdown timer to the next word: "Next word in: HH:MM:SS" - Disable "Play Again" in daily mode — the player gets one attempt per day - When Daily mode is off, use "Free Play" mode (current random behavior with unlimited replays) - Show which mode is active with a toggle switch
Step 4: Add Statistics
Track the player's performance over time so they can see their guess distribution and streaks.
Add a statistics popup that appears after each game and can be reopened with a bar chart icon (📊) button in the header. Show: - Games Played: total number of games completed - Win Percentage: wins / total games as a percentage - Current Streak: consecutive wins - Max Streak: best consecutive win streak ever - Guess Distribution: a horizontal bar chart showing how many times the player won in 1, 2, 3, 4, 5, or 6 guesses. Highlight the current game's bar in green. Save all stats to localStorage. Style the popup as a centered modal with a dark semi-transparent backdrop. Add a close button (X) in the top-right corner of the modal.
Step 5: Add Sound Effects
Subtle sounds make each keystroke and reveal feel more tactile and engaging.
Add sound effects using the Web Audio API (generate programmatically, no audio files): - Key press: very soft click (sine wave at 1000Hz, 20ms) - Tile flip reveal: soft pop sound (sine wave sweep from 600Hz to 800Hz, 50ms) - Correct guess (win): ascending victory jingle (C5, E5, G5, C6, each 100ms) - Incorrect final guess (lose): single low tone (C3, 300ms, fading out) - Invalid word (shake): quick buzz (square wave at 200Hz, 80ms) - Add a sound toggle (🔊/🔇) button in the header next to the stats button
Step 6: Add Hard Mode
Real Wordle has a hard mode where revealed hints must be used in subsequent guesses. Add this for players who want a challenge.
Add a "Hard Mode" toggle in a settings menu (gear icon in the header). When Hard Mode is on: - Any letter revealed as green MUST be used in the same position in subsequent guesses - Any letter revealed as yellow MUST be included somewhere in subsequent guesses - If the player tries to submit a guess that violates these rules, show a toast message explaining which rule was broken (e.g., "2nd letter must be A" or "Guess must contain S") - Shake the row on invalid hard mode attempts just like invalid words - Show "HARD MODE" label on the share results when sharing - Hard Mode can only be toggled before the first guess of a game
Step 7: Deploy and Share
Your Wordle clone is ready for the world. Click the Publish button in Lovable to deploy your game to a live URL. Share it with friends — especially the daily mode link so everyone can play the same word and compare results. Lovable gives you a shareable link instantly.
Level Up Your Game
Try these follow-up prompts to make your game even better:
Add a dark/light theme toggle:
Add a theme toggle button (sun/moon icon) in the header. Light theme: white background, dark text, light gray tiles. Dark theme: current dark colors. Save the preference to localStorage. Animate the transition between themes with a 300ms fade.
Add a timer:
Add an optional speed mode. Show a timer that counts up from 0:00 when the first letter is typed. Display the time on the stats screen after the game ends. Track the fastest win in localStorage and show "Best Time: X:XX" in the stats popup.
Add animations:
Add a victory dance animation when the player wins: each tile in the winning row bounces up and down sequentially (100ms delay between tiles, 500ms bounce). Add a wave animation to the "You Win" message. Add a gentle shake animation to incorrect guesses (translate left and right 5px, 3 oscillations over 400ms).
Add high score saving:
Save a game log to localStorage tracking every game: date, target word, guesses made, win/loss, time taken (if timer is enabled). Add a "History" tab in the stats modal showing the last 20 games in a scrollable list with the date, result (✅/❌), and number of guesses.
Add custom word lists:
Add a "Custom Game" option. Show an input field where the player can type a 5-letter word to create a custom puzzle. Generate a shareable URL with the word encoded (base64 encode it so it's not visible in the URL). When someone opens that URL, they play with the custom word. Show "Custom Puzzle" label on the share results.
Want persistent high scores? Follow our leaderboard guide to connect your game to a database.
Common Errors
Blank screen after prompt If Lovable generates a blank screen, add to your prompt: "Make sure the game renders immediately on page load with no user setup required."
Game not responding to keyboard Add to your prompt: "Ensure keyboard event listeners are attached to the document, not a specific element. Auto-focus the game container on load."
Mobile touch controls not working Add to your prompt: "Add touch event handlers for mobile. Include visible on-screen buttons for all controls on screens under 768px wide."