Introduction to Blockly | Google Developers

Blockly is a library that adds a visual code editor to web and mobile apps. The Blockly editor uses interlocking, graphical blocks to represent code ... Blockly Language English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어 Signin Home Guides Reference Samples GetHelp Summits Publications Blockly Home Guides Reference Samples GetHelp Summits Publications Overview GetStarted ConfigureBlockly InjectionOptions ConfigurationStructGridMoveZoomFixedSizeWorkspaceResizableWorkspaceToolboxCodeGeneratorsEventsSerializationCloudStorageThemesKeyboardNavigationTranslationsContextMenusAddCustomBlocks CreateCustomBlocks OverviewBlocklyDeveloperToolsDefineBlocksBlockColourLocalizeBlocksGeneratingCodeBlockParadigmsStyleGuideOperatorPrecedenceCachingArgumentsTypeChecksExtensionsandMutatorsVariables Fields OverviewAnatomyofaFieldValidators Built-inFields OverviewAngleCheckboxColourDropdownImageLabelLabel(Serializable)NumberTextInputVariable CustomizingFields OverviewCreatingaCustomFieldExtendinganExistingFieldUpgradingaCustomField ApplicationIntegration BestPracticesGeneratingandRunningJavaScriptAttributingBlockly ModifyBlockly Contributing OverviewWritingaGoodIssueWritingaGoodPRStyleGuideCommitMessageGuideTheCodeReviewProcessWritingaCodelabAddingaPluginIssueLabelsBlockly-samplesRepositoryStructurePlaygroundDevelopmentSetupForkingBlocklyBuildingAdvancedCompilationTranslatingUnitTesting Plugins OverviewUsingBlocklyAPIsDebuggingNamingConventions Interfaces OverviewConnectionCheckerMetricsManager Home Products GoogleforEducation Blockly Guides IntroductiontoBlockly Blocklyisalibrarythataddsavisualcodeeditortowebandmobileapps. TheBlocklyeditorusesinterlocking,graphicalblockstorepresentcode conceptslikevariables,logicalexpressions,loops,andmore.Itallowsusers toapplyprogrammingprincipleswithouthavingtoworryaboutsyntaxorthe intimidationofablinkingcursoronthecommandline. Blocklyisfordevelopers.Blocklyappsarefor students.Ifyou'reheretouseeducationalappsratherthanbuild them,checkoutthese ComputerScienceLearningOpportunities. BuildingaBlocklyapp Fromauser'sperspective,Blocklyisanintuitive,visualwaytobuildcode. Fromadeveloper'sperspective,Blocklyisaready-madeUIforcreatingavisual languagethatemitssyntacticallycorrectuser-generatedcode.Blocklycan exportblockstomanyprogramminglanguages,includingthesepopularoptions: JavaScript Python PHP Lua Dart Here'sahigh-levelbreakdownofwhatgoesintobuildingaBlocklyapp: IntegratetheBlocklyeditor.TheBlocklyeditoratitssimplestconsistsofatoolboxtostoreblocktypes,andaworkspaceforarrangingblocks.LearnmoreaboutintegratingBlocklyintheGetStarteddocs. Createyourapp'sblocks.Onceyou'vegotBlocklyinyourapp,youneedtocreateblocksforyouruserstocodewith,thenaddthemtoyourBlocklytoolbox.LearnhowinCreateCustomBlocksOverview. Buildtherestoftheapp.Byitself,Blocklyisjustawaytogeneratecode.Theheartofyourappisindecidingwhattodowiththatcode. GiveBlocklyattribution.Ifyou'dliketoletpeopleknowthatyouusedBlocklytobuildyourapp,youcangrabaBuiltonBlocklybadgefromtheAttributionpage. Blockly'sstrengthsandotheroptions Blocklyisoneofagrowingnumberofvisualprogrammingenvironments.Decidingwhichonetouseinyourappisanimportantstep,sohereareafewofBlockly'sbiggeststrengthstohelpyoumakethedecision: Exportablecode.Userscanextracttheirblock-basedprogramstocommonprogramminglanguagesandsmoothlytransitiontotext-basedprogramming. Opensource.EverythingaboutBlocklyisopen:youcanforkit,hackit,anduseitinyourownsitesandAndroidapps. Extensible.TweakBlocklytofityourneedsbyaddingcustomblocksforyourAPIorremovingunneededblocksandfunctionality. Highlycapable.Blocklyisnotatoy.Youcanimplementcomplexprogrammingtaskslikecalculatingstandarddeviationinasingleblock. International.Blocklyhasbeentranslatedto40+languages,includingright-to-leftversionsforArabicandHebrew. Evenwithallthosepositives,Blocklyisn'tthesolutionforeveryapp.Hereareafewothervisualeditorsthatyoumightfindhelpful: ScratchBlocks:Designedbythe peoplebehindMIT'sScratchandbuiltontheBlocklycodebase,ScratchBlocks offersasimplifiedprogrammingmodelidealforyounglearners. PXT:Thevisualandtext-based programmingenvironmentthatpowerstheMicrosoftMakeCodeeditors. PXTbundlesBlocks,TypeScript,asimulator,andacompilerinonelibrary. Droplet:Thegraphical programmingeditorthatpowersPencilCode,itsdistinguishingfeatureisthe abilitytoconvertfromcodetoblocks. Snap:A Scratch-inspiredgraphicalprogramminglanguage,it'snotalibrarybutis insteadafullappwithanintegratedexecutionenvironment. Exceptasotherwisenoted,thecontentofthispageislicensedundertheCreativeCommonsAttribution4.0License,andcodesamplesarelicensedundertheApache2.0License.Fordetails,seetheGoogleDevelopersSitePolicies.JavaisaregisteredtrademarkofOracleand/oritsaffiliates. Lastupdated2022-03-24UTC. [{ "type":"thumb-down", "id":"missingTheInformationINeed", "label":"MissingtheinformationIneed" },{ "type":"thumb-down", "id":"tooComplicatedTooManySteps", "label":"Toocomplicated/toomanysteps" },{ "type":"thumb-down", "id":"outOfDate", "label":"Outofdate" },{ "type":"thumb-down", "id":"samplesCodeIssue", "label":"Samples/codeissue" },{ "type":"thumb-down", "id":"otherDown", "label":"Other" }] [{ "type":"thumb-up", "id":"easyToUnderstand", "label":"Easytounderstand" },{ "type":"thumb-up", "id":"solvedMyProblem", "label":"Solvedmyproblem" },{ "type":"thumb-up", "id":"otherUp", "label":"Other" }] Connect Blog Facebook Medium Twitter YouTube Programs WomenTechmakers GoogleDeveloperGroups GoogleDevelopersExperts Accelerators GoogleDeveloperStudentClubs Developerconsoles GoogleAPIConsole GoogleCloudPlatformConsole GooglePlayConsole FirebaseConsole ActionsonGoogleConsole CastSDKDeveloperConsole ChromeWebStoreDashboard Android Chrome Firebase GoogleCloudPlatform Allproducts Terms Privacy SignupfortheGoogleDevelopersnewsletter Subscribe Language English BahasaIndonesia Deutsch Español Français Português–Brasil Русский 中文–简体 日本語 한국어