https://github.com/avidrucker/anki-card-test-1

a web app to help people design custom flashcards for Anki SRS
https://github.com/avidrucker/anki-card-test-1

anki editor flashcards

Last synced: 27 days ago
JSON representation

a web app to help people design custom flashcards for Anki SRS

• Host: GitHub
• URL: https://github.com/avidrucker/anki-card-test-1
• Owner: avidrucker
• Created: 2024-06-13T01:38:51.000Z (5 months ago)
• Default Branch: master
• Last Pushed: 2024-08-30T17:42:26.000Z (2 months ago)
• Last Synced: 2024-09-26T21:01:26.546Z (about 1 month ago)
• Topics: anki, editor, flashcards
• Language: JavaScript
• Homepage: https://avidrucker.github.io/anki-card-test-1/
• Size: 18.3 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Anki Card Designer

This app makes creating Anki cards using HTML and CSS easier, faster, and more fun. Access the app here: https://avidrucker.github.io/anki-card-test-1/

## Features

- **Easy Card Creation**: Quickly create Anki cards by writing HTML.

- **Customizable Styling**: Customize the styling of your cards using CSS.

- **SVG/CSS Image Filters**: Apply SVG/CSS image filters to your card images.

- **Google Fonts Integration**: Import Google fonts directly from the CSS editor pane.

- **Live Preview**: See a live preview of your card design as you make changes.

- **Built-in Card Templates**: Choose from several built-in card templates to get started.

- **Dummy Card Data**: Add dummy card data to see how your card will look with real content.

- **Syntax Highlighting, Code Formatting, and Line Numbers**: Enjoy modern code editing features.

- **Save and Load Designs**: Save your card designs as a JSON file to your computer, and upload your own designs back into Anki Card Designer.

- **Autosave to Local Storage**: Your card designs are automatically saved to your browser's local storage.

- (NOT YET) ~~Export to Anki: Export your cards as Anki decks for easy import into the Anki app.~~

## Getting Started (for developers)

To get started working with the Anki Card Designer on your local machine, follow these steps:

1. Clone the repository: `git clone https://github.com/your-username/anki-card-designer.git`

2. Install dependencies: `npm install`

3. Start the development server: `npm run dev`

4. Open your browser and navigate to `http://localhost:5173/`

## Usage

1. Open the Anki Card Designer in your browser.

2. Write your HTML and CSS code to design your Anki card.

3. Use the live preview to see how your card will look.

4. Customize the styling as desired.

5. Save your designs to a JSON file on your computer.

6. (NOT YET) ~~Export your cards as Anki decks for easy import into the Anki app.~~

## Contributing

Contributions are welcome! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.