svelte-crossword

By Amelia Wattenberger and Russell Samora.

Examples

Example page

Features

  • Generate puzzle from simple JSON format
  • Slottable toolbar that can tap into crossword methods
  • Fully responsive
  • Optimized for mobile with on-screen keyboard
  • Preset style themes with customization
  • Puzzle validation
  • Custom class names for cells and clues

Installation

npm install svelte-crossword

Usage

<script>
  import Crossword from "svelte-crossword";
  const data = [
    {
      "clue": "Black-and-white cookie",
      "answer": "OREO",
      "direction": "down",
      "x": 0,
      "y": 0
    },
    ...
  ]
</script>

<Crossword data="{data}" />

Data format

An array of objects with the following required properties:

property type description
clue String Clue text
answer String Answer text (auto-capitalizes)
direction String "across" or "down"
x Number starting x position (column) of clue
y Number starting y position (row) of clue
custom String optional custom class name to apply
[
  {
    "clue": "Clue text",
    "answer": "ANSWER",
    "direction": "across",
    "x": 0,
    "y": 0,
    "custom": "class-name"
  }
]

Note: X and Y coordinates can be zero or one based, it will detect automatically.

Parameters

parameter default type description
data required Array crossword clue/answer data
theme "classic" String preset theme to use
actions ["clear", "reveal", "check"] Array toolbar actions
revealDuration 1000 Number reveal transition duration in ms
breakpoint 720 Number when to switch to stacked layout
disableHighlight false Boolean turn off puzzle highlight
showCompleteMessage true Boolean show message overlay after completion
showConfetti true Boolean show confetti during completion message
showKeyboard false Boolean force on-screen keyboard display (overriding auto-check)
keyboardStyle "outline" String keyboard button style

Bindings

binding type description
revealed Boolean If the puzzle is showing all answers or not

Themes and Custom Styles

You can choose a preset theme by passing the prop: <Crossword theme="classic" />

Available themes:

  • classic (default)
  • dark
  • citrus
  • amelia

You can set your own global CSS variables to override theme defaults or roll-your-own. Simply create new a CSS variable prefixed with xd- to override the defaults. A Crossword component has a top-level class of .svelte-crossword.

Properties (with defaults)

.svelte-crossword {
  --xd-font: sans-serif; /* font-family for whole puzzle */
  --xd-primary-highlight-color: #ffcc00; /* color for focused cell */
  --xd-secondary-highlight-color: #ffec99; /* color for other cells in current clue */
  --xd-main-color: #1a1a1a; /* color for text, gridlines, void cells */
  --xd-bg-color: #fff; /* color for puzzle background */
  --xd-accent-color: #efefef; /* color for buttons */
  --xd-scrollbar-color: #cdcdcd; /* color for scrollbar handle */
  --xd-order: row; /* row = clues on left, row-reverse = clues on right  */
}

For more detailed customization, simply do a more targeted CSS selection. For example...

.svelte-crossword .cell text.number {
  font-size: 0.5em;
}

Custom Slots

You can provide more fine-grained control over the toolbar and completion message with custom slots.

Toolbar

<Crossword>
    <div
        class="toolbar"
        slot="toolbar"
        let:onClear
        let:onReveal
        let:onCheck >
        <button on:click="{onClear}">clear puzzle</button>
        <button on:click="{onReveal}">show answers</button>
        <button on:click="{onCheck}">check cells</button>
    </div>
<Crossword>

Completion Message

<Crossword>
    <div slot="complete">
        <h3>OMG, congrats!</h3>
        <img
            alt="celebration"
            src="https://media3.giphy.com/media/QpOZPQQ2wbjOM/giphy.gif" />
    </div>
</Crossword>

Development

cd example
npm run dev

Notes

Approaches

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes