Make your own grid paper - instantly.
Choose from 10+ patterns, customize spacing, color, and opacity, then print.
Choose a pattern, customize your grid, and print - all in one place.
OffTheGrid is a free online tool that lets you create custom grid paper in seconds.
Whether you need dot grids for bullet journaling, square grids for sketching, isometric grids for 3D drawing, or music staff paper for composing - OffTheGrid has you covered.
No sign-up. No ads. Just grid paper.
Traditional grid paper comes with limitations. You're limited to whatever patterns are available in stores, restricted to standard sizes, and often paying for an entire notebook when you only need a few sheets.
OffTheGrid removes those limitations by putting you in complete control of your grid paper.
No more compromises. Whether you're:
- A student sketching diagrams
- A designer prototyping layouts
- A musician composing on staff paper
- A bullet journal enthusiast creating custom spreads
OffTheGrid adapts to your workflow, not the other way around.
Print exactly what you need, when you need it, completely free.
Choose from a growing collection of professionally designed grid patterns for creative, educational, and technical work.
-
Dot Grid - Perfect for bullet journaling, sketching, and note-taking. Subtle dots provide guidance without distracting from your content.
-
Lined Paper - Classic ruled lines for writing, journaling, and everyday notes.
-
Square Grid - Standard graph paper for mathematics, plotting, and technical drawing.
-
Isometric Grid - Triangular grids for 3D sketches, architectural drawings, and isometric illustrations.
-
Hex Grid - Hexagonal layouts for tabletop games, maps, and geometric artwork.
-
Cross Grid - Crosshatch patterns designed for drafting and precision work.
-
Graph Paper - Traditional 5×5 graph paper featuring bold major lines and subtle minor divisions, ideal for mathematics and data plotting.
-
Large Dot Grid - Larger, more visible dots for bold journaling, planning, and heavy writing.
-
Music Staff - Five-line staff paper for composers, musicians, and music students.
-
Isometric Dots - An isometric dot layout for perspective drawing and 3D sketching.
Adjust grid density with precision.
- Interactive spacing slider
- Direct numeric input
- Millimeters (mm) and inches (in)
- Instant ruler updates when switching units
Create the exact spacing your project requires.
Personalize every sheet.
- Choose any grid color
- Adjust opacity from subtle to bold
- One-click reset to default settings
Whether you prefer barely visible guides or high-contrast grids, you're in control.
Grid paper is made to be printed.
With a single click:
- Clean print output
- No ads
- No UI clutter
- Sharp, accurate rendering
Just your custom grid, ready for paper.
Your preferences are automatically saved in your browser.
- No account required
- No sign-up
- Settings persist between sessions
- Resume exactly where you left off
Everything is stored locally, keeping your workflow fast and private.
| Action | How to do it |
|---|---|
| Choose a pattern | Click any pattern icon in the control panel |
| Adjust spacing | Drag the slider or click the value to type manually |
| Change unit | Click the mm or in button next to the spacing value |
| Change color | Click the color preview box or the color picker icon |
| Reset color | Click the reset button (↺) next to the color picker |
| Change opacity | Drag the opacity slider |
| Toggle ruler unit | Click anywhere on the ruler at the top |
Click the PRINT button |
offthegrid/
├── public/
│ └── favicon/
│ └── icon.png
├── src/
│ ├── components/
│ │ ├── Canvas/
│ │ │ └── PatternRenderer.tsx ← (new)
│ │ ├── Controls/
│ │ │ ├── ControlPanel.tsx
│ │ │ └── Ruler.tsx
│ │ └── UI/
│ │ ├── Loader.tsx
│ │ ├── Notification.tsx
│ │ ├── GlobalNotification.tsx
│ │ ├── OpacityControl.tsx
│ │ ├── PrintButton.tsx
│ │ └── SpacingControl.tsx
│ ├── hooks/
│ │ ├── useDebouncedGrid.ts
│ │ └── useNotification.ts
│ ├── patterns/
│ │ ├── dotGrid.ts
│ │ ├── drawCrossGrid.ts
│ │ ├── drawDotGridLarge.ts
│ │ ├── drawGraphGrid.ts
│ │ ├── drawHexGrid.ts
│ │ ├── drawIsometricDots.ts
│ │ ├── drawIsometricGrid.ts
│ │ ├── drawMusicStaff.ts
│ │ ├── linedPaper.ts
│ │ └── squareGrid.ts
│ ├── store/
│ │ ├── gridStore.ts
│ │ └── notificationStore.ts
│ ├── types/
│ │ └── grid.ts
│ ├── utils/
│ │ ├── constants.ts
│ ├── App.tsx ← UPDATED (PatternRenderer)
│ ├── main.tsx
│ └── index.css ← CLEANED UP (removed pattern classes)
├── .gitignore
├── index.html
├── package.json
├── README.md
├── LICENSE
├── tsconfig.json
└── vite.config.ts
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| TypeScript | Type safety |
| Tailwind CSS v4 | Styling |
| Zustand | State management |
| Vite | Build tool |
| use-debounce | Performance optimization |
Contributions are welcome. Yes, even yours.
-
Fork the repository
-
Create a feature branch
git checkout -b feature/amazing-feature
Commit your changes- Commit your feature
git commit -m "Add amazing feature"
Push to your branch- Push to your's branch
git push origin feature/amazing-feature- Open a Pull Request
- Use ES6+ syntax
- Format code with Prettier
- Write clear, descriptive commit messages
- Update documentation when needed
- Ensure there are no console errors or warnings
- Node.js 18+ (LTS recommended)
- npm, yarn, or pnpm
# Clone the repository
git clone https://github.com/byllzz/offthegrid.git
# Navigate to the project
cd offthegrid
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
If you enjoyed this project, consider giving it a ⭐ on GitHub. It helps others discover the project and motivates future improvements.
This project is licensed under the MIT License.
MIT License
Copyright (c) 2026 Bilal Malik
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software.The above copyright notice and this permission notice shall
be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
© 2026 OffTheGrid - Open Source MIT