LiveCodes (@livecodes_io) 's Twitter Profile
LiveCodes

@livecodes_io

Code Playground That Just Works!
An open-source client-side playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and 90+ languages.

ID: 1673862327806971904

linkhttps://livecodes.io calendar_today28-06-2023 01:15:06

963 Tweet

893 Takipรงi

505 Takip Edilen

LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ’กTip of the day: Choose your perfect editor! ๐Ÿ”ง Monaco (VS Code engine) - Desktop ๐Ÿ”ง CodeMirror6 - Mobile-friendly ๐Ÿ”ง CodeJar - Lightweight Plus Vim/Emacs bindings, custom themes, and more! Settings โ†’ Editor Settings #LiveCodes #Editor

LiveCodes (@livecodes_io) 's Twitter Profile Photo

โšก #LiveCodes_can run Svelte with full reactivity! Build lightning-fast apps with Svelte's compile-time optimizations. ๐Ÿš€ Svelte: livecodes.io/docs/languagesโ€ฆ #LiveCodes #Svelte

โšก #LiveCodes_can run <a href="/sveltejs/">Svelte</a> with full reactivity! Build lightning-fast apps with Svelte's compile-time optimizations.

๐Ÿš€ Svelte: livecodes.io/docs/languagesโ€ฆ
#LiveCodes #Svelte
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ’กTip of the day: Query databases in the browser! ๐Ÿ—„๏ธ SQLite with SQL.js ๐Ÿ—„๏ธ PostgreSQL with PGlite ๐Ÿ—„๏ธ Helper methods for easy rendering Results render as beautiful HTML tables! ๐Ÿš€ SQL starter template: livecodes.io/?template=sql #LiveCodes #SQL #Database

๐Ÿ’กTip of the day: 
Query databases in the browser!

๐Ÿ—„๏ธ SQLite with SQL.js
๐Ÿ—„๏ธ PostgreSQL with PGlite
๐Ÿ—„๏ธ Helper methods for easy rendering

Results render as beautiful HTML tables!
๐Ÿš€ SQL starter template: livecodes.io/?template=sql
#LiveCodes #SQL #Database
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ“Œ #LiveCodes_can generate permanent URLs! Pin specific versions to ensure your shared and embedded playgrounds never break with updates. ๐Ÿ”— Permanent URLs: livecodes.io/docs/features/โ€ฆ #LiveCodes #PermanentURLs

๐Ÿ“Œ #LiveCodes_can generate permanent URLs! Pin specific versions to ensure your shared and embedded playgrounds never break with updates.

๐Ÿ”— Permanent URLs: livecodes.io/docs/features/โ€ฆ
#LiveCodes #PermanentURLs
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ’กTip of the day: Scope your styles with CSS Modules! Enable from style editor menu โ†’ CSS Modules ๐Ÿ“š CSS Modules: livecodes.io/docs/languagesโ€ฆ #LiveCodes #CSSModules

๐Ÿ’กTip of the day: 
Scope your styles with CSS Modules!

Enable from style editor menu โ†’ CSS Modules

๐Ÿ“š CSS Modules: livecodes.io/docs/languagesโ€ฆ
#LiveCodes #CSSModules
LiveCodes (@livecodes_io) 's Twitter Profile Photo

#LiveCodes_can teach programming visually with #Blockly ! ๐Ÿงฉ Drag and drop blocks to create code - Perfect for teaching kids, beginners, or anyone who learns better visually ๐ŸŽฏ Watch your visual blocks transform into real JavaScript code ๐Ÿ‘‰ livecodes.io/?template=blocโ€ฆ #LiveCodes

#LiveCodes_can teach programming visually with #Blockly ! 

๐Ÿงฉ Drag and drop blocks to create code - Perfect for teaching kids, beginners, or anyone who learns better visually

๐ŸŽฏ Watch your visual blocks transform into real JavaScript code
๐Ÿ‘‰ livecodes.io/?template=blocโ€ฆ
#LiveCodes
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐ŸŽจ #LiveCodes_can work with Vue Single File Components! Full Vue 3 support with scoped CSS, TypeScript, JSX, and composition API. ๐ŸŒŸ Vue: livecodes.io/docs/languagesโ€ฆ #LiveCodes #Vue

๐ŸŽจ #LiveCodes_can work with <a href="/vuejs/">Vue</a> Single File Components! Full Vue 3 support with scoped CSS, TypeScript, JSX, and composition API.

๐ŸŒŸ Vue: livecodes.io/docs/languagesโ€ฆ
#LiveCodes #Vue
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ’กTip of the day: Add libraries without code changes! ๐Ÿ“š Search npm packages ๐Ÿ“š Add Google Fonts ๐Ÿ“š Include CSS presets (Normalize, Reset) ๐Ÿ“š External scripts & stylesheets Project โ†’ External Resources #LiveCodes #ExternalResources

๐Ÿ’กTip of the day: 
Add libraries without code changes!

๐Ÿ“š Search npm packages
๐Ÿ“š Add Google Fonts
๐Ÿ“š Include CSS presets (Normalize, Reset)
๐Ÿ“š External scripts &amp; stylesheets
Project โ†’ External Resources
#LiveCodes #ExternalResources
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ™ Connect with GitHub account: โœ… Import from private repos โœ… Save assets โœ… Export to GitHub Gists โœ… Deploy to GitHub Pages โœ… Sync projects across devices ๐ŸŽฏ One account, accessible everywhere! ๐Ÿ‘‰ livecodes.io/docs/features/โ€ฆ #LiveCodes #GitHub #Integration #Sync #Deploy

LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ” #LiveCodes_can help you learn with starter templates! Lots of templates covering frameworks, languages, and common patterns. ๐Ÿš€ Start now: livecodes.io/?new #LiveCodes #learn #templates

๐Ÿ” #LiveCodes_can help you learn with starter templates! 
Lots of templates covering frameworks, languages, and common patterns.

๐Ÿš€ Start now: livecodes.io/?new
#LiveCodes #learn #templates
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ—บ๏ธ Override module resolution ๐ŸŽฏ Perfect for testing specific versions and unpublished modules! ๐Ÿ“š livecodes.io/docs/features/โ€ฆ #LiveCodes #SDK #ImportMaps #Modules

๐Ÿ—บ๏ธ Override module resolution

๐ŸŽฏ Perfect for testing specific versions and unpublished modules!

๐Ÿ“š livecodes.io/docs/features/โ€ฆ
#LiveCodes #SDK #ImportMaps #Modules
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ“ Simulate multiple files in projects ๐Ÿซฅ Hide specific editors ๐ŸŽฏ Have full control over how to show your embedded playgrounds ๐Ÿ“š livecodes.io/docs/configuraโ€ฆ #LiveCodes #SDK

๐Ÿ“ Simulate multiple files in projects
๐Ÿซฅ Hide specific editors
๐ŸŽฏ Have full control over how to show your embedded playgrounds

๐Ÿ“š livecodes.io/docs/configuraโ€ฆ

#LiveCodes #SDK
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐ŸŽช #LiveCodes_can broadcast live coding sessions! Share your screen in real-time for teaching, presentations, and collaboration. ๐Ÿ“ก Broadcast: livecodes.io/docs/features/โ€ฆ #LiveCodes #broadcast

๐ŸŽช #LiveCodes_can broadcast live coding sessions! Share your screen in real-time for teaching, presentations, and collaboration.

๐Ÿ“ก Broadcast: livecodes.io/docs/features/โ€ฆ
#LiveCodes #broadcast
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ’กTip of the day: Export to GitHub seamlessly! ๐Ÿ“ Export as GitHub Gist ๐Ÿ“ Deploy to GitHub Pages ๐Ÿ“ Import from any repo/directory ๐Ÿ“ Sync data to private repos Perfect for backing up your experiments! #LiveCodes #GitHub

LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ”„ Enable automatic test running ๐Ÿงช livecodes.io/docs/features/โ€ฆ #LiveCodes #SDK #Testing #TDD #Jest

๐Ÿ”„ Enable automatic test running

๐Ÿงช livecodes.io/docs/features/โ€ฆ

#LiveCodes #SDK #Testing #TDD #Jest
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ”ง #LiveCodes_can be controlled via powerful APIs! SDK for JavaScript, React, Vue, and Svelte makes integration seamless. ๐Ÿ› ๏ธ SDK: livecodes.io/docs/sdk #LiveCodes #SDK

LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ’กTip of the day: Customize the UI for any use case! ๐Ÿ“บ Full - Complete IDE experience ๐Ÿ“บ Simple - One editor + result ๐Ÿ“บ Editor - Code-only view ๐Ÿ“บ Result - Output-only ๐Ÿ“บ Codeblock - Read-only snippets Perfect for embedding! Display Modes: livecodes.io/docs/features/โ€ฆ #LiveCodes

LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ–ฅ๏ธ Customize console behavior Console options: - open - Show console - full - Maximize console - closed - Close console - none - Hide console ๐Ÿ“š livecodes.io/docs/features/โ€ฆ #LiveCodes #UrlParams #Console #Debugging #DevTools

๐Ÿ–ฅ๏ธ Customize console behavior

Console options:
- open - Show console
- full - Maximize console
- closed - Close console
- none - Hide console

๐Ÿ“š livecodes.io/docs/features/โ€ฆ

#LiveCodes #UrlParams #Console #Debugging #DevTools
LiveCodes (@livecodes_io) 's Twitter Profile Photo

๐Ÿ“ฆ #LiveCodes_can manage your code snippets! Save, organize, and reuse code across projects with built-in snippet management. ๐Ÿ“ Snippets: livecodes.io/docs/features/โ€ฆ #LiveCodes #snippets

๐Ÿ“ฆ #LiveCodes_can manage your code snippets! Save, organize, and reuse code across projects with built-in snippet management.

๐Ÿ“ Snippets: livecodes.io/docs/features/โ€ฆ
#LiveCodes #snippets